# install
npm install --save rc-waterfall
# run
npm run dev
# build
npm run build
local: http://localhost:3002/
online: http://mapleliu.com/rc-waterfall/
Usage demo
import Waterfall from 'rc-waterfall';
...
<Waterfall
source = {[...]}
columnWidth = {200}
isOnlyImg
renderItem = {(ci,si,url)=><div><img src={url}/><h4>{si}</h4></div>}
getTarget = {()=>window}
/>
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
source | 图片资源列表 | array | - | - |
columnWidth | 单列宽度【单位px】 | number | 210 | - |
isOnlyImg | 是否只根据图片高度进行排版 | boolean | false | true,false |
renderItem | 渲染瀑布流块元素,回调参数【图片在列中位置ci:number,图片在source中位置si:number,图片url:string】 | function(ci,si,url):ReactNode | (ci,si,url)=><img src={url}/> |
- |
getTarget | 设置需要监听其滚动事件的元素,值为一个返回对应 DOM 元素的函数 | function():HTMLElement | ()=>window | - |
- 通过列宽【columnWidth】与容器【父级元素】宽度算出可显示列数columnNum,生成对应数量的列元素列表columns,且每列有一个图片元素【如果图片数量足够】
- 执行图片缓存与添加图片元素操作
- 判断如果需要添加图片元素,查找最短列并添加图片元素,执行完成后,继续执行添加图片元素操作
- 判断如果不需要添加图片元素,操作停止
- 如果根据图片高度排版【isOnlyImg:true】,图片缓存完成后会被添加到一个虚拟dom列表domColumns中,根据domColumns中各列的图片高度和查找最短列
- 如果根据实际元素高度排版【isOnlyImg:false】,列元素渲染完成后的dom元素会被添加domColumns中,根据domColumns中各列dom元素的实际高度查找最短列
- 初始化完成
- 上一次添加图片元素渲染完成后
- getTarget返回的dom滚动条监听事件触发时
- 图片是否已全部加载完
- 图片元素是否已渲染到指定位置
- 图片提前缓存,提升滚动时的流畅度
- 优化shouldComponentUpdate,避免重复渲染