在日常工作的过程中,搭建瀑布流式的页面布局是一个经常出现的业务场景。
背景
瀑布流布局的定义
一般来说,把多列等宽、元素高度不一的页面布局认为是瀑布流布局.
![](https://i-blog.csdnimg.cn/blog_migrate/5398c52ec4bd0ad6854f43f28fc4f547.png)
瀑布流的特点
瀑布流的特点通常包括以下:
- 多列布局
- 每列等宽
- 高度参差不齐(这是和常规列表不一样的地方,造成不规则的效果)
- 大量元素展示(通常是图片或图文并存)
因此,当我们根据获得的列表进行展示的时候,引申出排版的规律:
- 优先插入高度小的那一列
- 同等高度,优先左侧
动手开工
组件属性
根据上面的归纳,可以为Waterfall
组件得到以下属性
list
: 传入需要进行瀑布流布局的数据列表,每个元素必须包含height和width字段cols
: 瀑布流布局展示的列数width
: 瀑布流布局的总宽度,单位为pxmargin
: 列与列之间的间隔距离,默认为20,单位为px
<Waterfall list={waterfallL