基于react的瀑布流组件

在日常工作的过程中，搭建瀑布流式的页面布局是一个经常出现的业务场景。

背景

瀑布流布局的定义

一般来说，把多列等宽、元素高度不一的页面布局认为是瀑布流布局.

瀑布流的特点

瀑布流的特点通常包括以下：

• 多列布局
• 每列等宽
• 高度参差不齐（这是和常规列表不一样的地方，造成不规则的效果）
• 大量元素展示（通常是图片或图文并存）

因此，当我们根据获得的列表进行展示的时候，引申出排版的规律：

• 优先插入高度小的那一列
• 同等高度，优先左侧

动手开工

组件属性

根据上面的归纳，可以为Waterfall组件得到以下属性

• list: 传入需要进行瀑布流布局的数据列表，每个元素必须包含height和width字段
• cols: 瀑布流布局展示的列数
• width: 瀑布流布局的总宽度，单位为px
• margin: 列与列之间的间隔距离，默认为20，单位为px

<Waterfall list={waterfallList} cols={4} width={450} margin={10}></Waterfall> 

计算每列的宽