看哪里 看卡片的顶部：每一列各自往下排，行与行没有对齐。点上方标签筛选，卡片会重新补位；悬停照片出现「保存」按钮，保存过的会一直显示「已保存」。手机宽度下变成两列
这是什么
瀑布流（Masonry Layout）让宽度相同、高度不同的卡片一列列往下排，每张新卡片补到当前最短的那一列下面，像砌砖一样不留空洞。Pinterest、小红书和花瓣都用这种布局浏览大量图片；网页上常用 Masonry.js 实现，CSS 也在制定原生的瀑布流布局
也叫瀑布流布局Pinterest 布局砌砖布局Masonry
关键特征
- 缺了就不像
- 等宽不等高的卡片按最短列补位行不对齐
- 加了更像
- 圆角图片悬停保存按钮筛选标签无限滚动
容易混淆
- Bento 网格Bento Grid
Bento 用格子大小表达主次、拼成整齐矩形；瀑布流的位置由补位规则产生，适合浏览
- 网格错峰Grid Stagger
网格错峰是入场动画；瀑布流是卡片的排布方式
瀑布流Masonry Layout
等宽不等高的卡片一列列往下补位，越滚越多，像 Pinterest 和小红书
你可能会说
- 像小红书那种一列列的图片
- 图片长短不一往下排
- Pinterest 那种图片墙
适合用在
- 图片、灵感和商品的浏览页
- 作品集里比例各不相同的照片
- 社区内容的信息流
这样描述给 AI
做一个瀑布流（Masonry）布局的摄影作品浏览页：白色背景，顶部是圆形头像和浅灰圆角搜索框，下面一行可筛选的胶囊标签（选中项黑底白字）；内容区 4 列（手机 2 列），每张照片宽度相同、高度按原图比例不同，16px 圆角，按最短列补位往下排；照片下面一行小字标题；悬停时照片变暗，右上角出现红色「保存」胶囊按钮，左下角显示拍摄时间