视频链接: 哔哩哔哩
瀑布流布局把图片或视频等内容以流水的形式,一个接一个地排成一行,从上到下流下来。这种方式很适合展示那些高高低低、大小不一的图片或视频,因为它能保证屏幕的每一个角落都被充分利用,不会有空隙,就像小溪填满了河床一样。这样,用户就可以一直滚动看下去,看到各种各样的内容。
应用场景
1.图片和视觉内容展示
瀑布流布局非常适合展示尺寸不一的图片内容,如摄影作品、插画、设计作品、壁纸等。它能充分利用屏幕空间,让不同高度的图片自然错落排列,提升整体视觉美感。
2.内容推荐与社交动态
在内容推荐型平台(如 Pinterest、瀑布流电商推荐、短视频平台)或社交动态流中,瀑布流布局可以不断加载新内容,并保持界面流畅有序,增强用户的浏览欲望和停留时间。
3.商品展示与电商平台
对于商品图文尺寸不一、描述长度不统一的电商场景,瀑布流可以打破传统网格的高度限制,使商品信息自然排列,避免空白和裁切,提高页面利用率与视觉吸引力。
4.动态高度组件展示
当组件高度随内容动态变化(如多行文本、弹性卡片等),使用瀑布流布局可以避免由于高度不一致导致的空白,保持页面布局自然紧凑,提升内容整体协调性。
常用属性
| 属性 | 作用 | 备注 |
|---|---|---|
| 方向 | 网格滚动方向 | 垂直和水平 |
| 翻转 | 是否反向排列 | 默认为 false,设置为 true 可从底部或右侧开始滚动 |
| 自适应内容高度 | 是否根据内容自适应高度 | 适用于嵌套滚动场景 |
| 主轴间隙 | 网格项在主轴(纵向)上的间距 | 默认为0 |
| 交叉轴间隙 | 网格项在交叉轴(水平方向)上的间距 | 默认为0 |
| 交叉轴个数 | 每行展示的列数(定宽布局) | 默认为3 |
| 内边距 | 网格整体与容器边缘的间距 | 和 容器 的内边距配置方法一致 |
