https://github.com/isaced/react-flex-images

A lightweight react wrapper for creating fluid galleries as seen on Flickr and Google Images, based on Pixabay/JavaScript-flexImages
https://github.com/isaced/react-flex-images

gallery pixabay react

Last synced: 3 months ago
JSON representation

A lightweight react wrapper for creating fluid galleries as seen on Flickr and Google Images, based on Pixabay/JavaScript-flexImages

• Host: GitHub
• URL: https://github.com/isaced/react-flex-images
• Owner: isaced
• License: mit
• Created: 2022-03-23T14:53:19.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-03-30T11:52:03.000Z (over 3 years ago)
• Last Synced: 2025-06-19T11:05:52.279Z (4 months ago)
• Topics: gallery, pixabay, react
• Language: TypeScript
• Homepage:
• Size: 629 KB
• Stars: 3
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README-zh_CN.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-flex-images [![npm](https://img.shields.io/npm/v/react-flex-images.svg?style=flat-square)](https://www.npmjs.com/package/react-flex-images)

一个轻量级的封装实现类似 Pixabay/Flickr/Google Images 的横向瀑布流（画廊）布局，基于 [Pixabay/JavaScript-flexImages](https://github.com/Pixabay/JavaScript-flexImages) 开发。

[English](./README.md) | 简体中文

## ✨ 特性 

- 轻量级：4.8 kB JavaScript - gzipped 不到 1.8 kB 

- 支持任意大小图像

- 响应式

- 通过 CSS 控制的图像之间的相等边距

- 不会裁剪或重排序

- 支持 AJAX 比如实现无限加载

- 支持自定义控制布局 （如最大行数、是否现实不完整的最后一行）

## 📃 示例

![Preview](https://user-images.githubusercontent.com/2088605/159846905-eddb7ef8-b710-4ca5-bd06-0c373cb510fe.png)

[![EditOnCodeSanbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-flex-images-example-c26qfu)

## 📦 安装 

```bash

$ npm install react-flex-images

```

## 🔨 使用 

```jsx

import { FlexImagesContainer, FlexImagesItem } from "react-flex-images";

const App = () => (

  <>

    

        

        

        ...

    

  >

);

```

## 设置

| 属性  	     | 默认值 	   | 描述                                                                             	|

|-----------	|---------	|----------------------------------------------------------------------------------	|

| rowHeight 	| 300     	| 最大行高                                                                          	|

| maxRows   	| null    	| 最大行数，超出隐藏 	                                                                 |

| truncate  	| false   	| 如果最后一行未填满，是否隐藏                                                           	|