React Column Gallery
- 响应式可定制的图片展示组件
- 保持图片宽高比
- 自定义底部内容
- SSR支持
Preview
Installation
yarn add react-column-gallery
or
npm install react-column-gallery
Minimal Setup Example
const photos = [
{
src: 'http://example.com/example/img1.jpg',
width: 4,
height: 3
},
{
src: 'http://example.com/example/img2.jpg',
width: 1,
height: 1
}
];
<Gallery photos={photos} />;
API Documentation
可以查看 index.d.ts
查看具体的定义
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
photos | array | undefined | 一个Photo的数组,每一个项Photo的定义查看下面。 |
columns | number or function | - | 可选;列的数目或一个返回列数量的函数,参数为容器的宽度。若不设置,将使用内部的断点进行列的自适应变化。 |
spacing | number or { horizontal: number, vertical: number } or function | - | 可选的;用于设置横向和纵向的间距。 |
initialContainerWidth | number | 0 | 可选的;初始的容器宽度,用于SSR。 |
renderPhoto | function | undefined | 可选的;用于自定义图片渲染。 |
footerHeight | number | 0 | 可选的;图片底部内容高度,用于增加图片渲染额外信息。 |
renderFooter | function | undefined | 可选的;用于渲染底部内容。 |
Photo每一项属性定义
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
key | string or number | src | 可选;组件中使用,确保列表内唯一。 |
src | string | undefined | 必传;图像地址。 |
width | number | undefined | 必传;;图像的宽度(用于计算宽高比,可以不是真实值,但宽高比必须和原图一致)。 |
height | number | undefined | 必传;图像的高度(用于计算宽高比,可以不是真实值,但宽高比必须和原图一致)。 |
alt | string | undefined | 可选;图像的alt文本。 |
loading | "lazy" or "eager" | "eager" | 可选;用于设置 img 的loading 属性。 |