Waterfall 瀑布流
瀑布流布局组件，用于展示不规则高度的内容，支持无限滚动加载和动画效果。
何时使用
- 展示大量图片或卡片时，需要按照一定规律排列。
- 需要无限滚动加载更多内容时。
- 内容高度不一致，需要紧凑布局时。
代码演示
基本使用
自定义多列
滚动加载更多
API
Waterfall
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| dataSource | 数据源 | any[] | [] |
| columns | 列数 | number | 2 |
| gutter | 列间距（单位：px） | number | 16 |
| defaultItemHeight | 默认项目高度（单位：px） | number | 200 |
| enableAnimation | 是否启用动画 | boolean | true |
| animationDuration | 动画持续时间（单位：ms） | number | 300 |
| animationEasing | 动画缓动函数 | string | 'ease-out' |
| renderItem | 自定义渲染项 | (item: any, index: number) => React.ReactNode | - |
| className | 容器类名 | string | - |
| style | 容器样式 | React.CSSProperties | - |
| loading | 是否正在加载更多 | boolean | false |
| hasMore | 是否还有更多数据 | boolean | true |
| onLoadMore | 加载更多的回调函数 | () => void | - |
| loadingComponent | 自定义加载中显示内容 | React.ReactNode | '加载中...' |
| noMoreComponent | 自定义没有更多数据显示内容 | React.ReactNode | '没有更多了' |
注意事项
-
图片加载处理
- 组件会自动等待图片加载完成后再计算高度
- 如果图片加载时间超过 200ms，会先使用默认高度进行布局
- 图片加载完成后会自动更新布局
-
性能优化
- 建议给
dataSource中的每个项目添加唯一的key - 大量数据时建议使用虚拟滚动优化
- 图片建议使用 CDN 并进行适当压缩
- 建议给
-
动画效果
- 动画仅在项目首次渲染和布局更新时触发
- 可以通过
enableAnimation属性关闭动画 animationEasing支持所有 CSS transition-timing-function 的值
-
响应式布局
- 可以通过监听窗口大小变化动态调整
columns属性 - 建议配合 CSS 媒体查询使用
- 列数改变时会自动重新计算布局
- 可以通过监听窗口大小变化动态调整