布局模式 · 内容展示
瀑布流
Masonry Layout
也叫：瀑布流布局、砖墙布局、Pinterest 布局、Masonry
卡片等宽但高度随内容变化，新卡片总是填进最短的一列，整体错落像一面砖墙，常见于图片社区和种草类应用。
点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。
怎么跟 AI 说
改成你的业务内容再发用瀑布流（Masonry）展示笔记列表：桌面 4 列、平板 3 列、手机 2 列，列间距 12px；卡片等宽，高度随图片原始比例变化，图片不裁切，下方是最多两行的标题和作者头像、昵称、点赞数。新卡片放进最短的一列，图片加载前按比例预留高度，滚动到底部自动加载更多。
发给
01判断
你的内容是这样吗？
对照两列，确认瀑布流是不是你要找的。
02避坑
常见坏用法
看起来能用，其实会给用户添麻烦。
- 01
用 CSS 多列（column-count）实现，条目变成从上到下逐列排，最新的内容跑到第二列底部
下面的线框画的就是这种情况，红色虚线框是出问题的地方。右边的线框画的就是这种情况，红色虚线框是出问题的地方。
- 02
图片没有预留高度，加载完成时卡片跳动、整列重新排位
- 03
把后台管理数据做成瀑布流，找一条记录要满屏乱找
03识别
怎么认出它
先看整体结构，再对照几个一眼能认出的特征。
结构
页面分成几条等宽的列，高度不一的卡片依次填入当前最短的一列，各列底部不对齐，整体呈错落的砖墙状。
组成部分点一下，在上面的线框里标出来
识别特征
- 1几列等宽的卡片，高度参差不齐
- 2各列底部不对齐，像错落的砖墙
- 3图片占卡片大部分面积，下方只有一两行文字
04解释
详细解释
瀑布流把页面分成固定的几列（比如桌面 4 列、手机 2 列），每张卡片宽度相同，高度由图片原始比例和文字长短决定。新卡片总是放进当前最矮的那一列，所以整体参差错落，像一面砖墙。小红书、Pinterest、花瓣的首页都是这种布局。
它的好处是保留每张图片的原始比例、不用裁切，同时页面几乎没有空隙，一屏能放下很多内容，配合无限滚动很适合「随便逛逛」的浏览场景。
代价是阅读顺序不明确：条目左右跳着排，用户很难按顺序查看，也很难记住某条在哪，更没法按字段比较。和卡片网格相比，卡片网格等高对齐、秩序感强；瀑布流更自由、更省空间，但只适合以视觉浏览为主的内容。
开发者信息术语 ID、DOM 线索、识别优先级
- 术语 ID
layout-masonry- DOM 选择器
插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。
[class*="masonry" i]:is(.columns-2, .columns-3, .columns-4, .columns-5)
- 类名关键词
类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。
masonrywaterfallpinterestmasonry-grid
- 优先级
- 1 · 同一层有多条命中时，优先级高的胜出
- 版本
- v2 · 更新于 2026/09/30