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