# 瀑布流（Masonry Layout）

镜语 · 版式与界面 / 布局方式

- 别名：瀑布流布局、Pinterest 布局、砌砖布局、Masonry
- 口语：「像小红书那种一列列的图片」「图片长短不一往下排」「Pinterest 那种图片墙」
- 一句话：等宽不等高的卡片一列列往下补位，越滚越多，像 Pinterest 和小红书
- 是什么：瀑布流（Masonry Layout）让宽度相同、高度不同的卡片一列列往下排，每张新卡片补到当前最短的那一列下面，像砌砖一样不留空洞。Pinterest、小红书和花瓣都用这种布局浏览大量图片；网页上常用 Masonry.js 实现，CSS 也在制定原生的瀑布流布局
- 缺了就不像：等宽不等高的卡片；按最短列补位；行不对齐
- 加了更像：圆角图片；悬停保存按钮；筛选标签；无限滚动
- 适合用在：图片、灵感和商品的浏览页；作品集里比例各不相同的照片；社区内容的信息流
- 看哪里：看卡片的顶部：每一列各自往下排，行与行没有对齐。点上方标签筛选，卡片会重新补位；悬停照片出现「保存」按钮，保存过的会一直显示「已保存」。手机宽度下变成两列
- 注意：需要按顺序阅读或比较的内容不适合，阅读顺序在列之间跳来跳去；卡片高度差太大，某一列会长出一截
- 描述示例：做一个瀑布流（Masonry）布局的摄影作品浏览页：白色背景，顶部是圆形头像和浅灰圆角搜索框，下面一行可筛选的胶囊标签（选中项黑底白字）；内容区 4 列（手机 2 列），每张照片宽度相同、高度按原图比例不同，16px 圆角，按最短列补位往下排；照片下面一行小字标题；悬停时照片变暗，右上角出现红色「保存」胶囊按钮，左下角显示拍摄时间
- 易混：
  - [Bento 网格](https://idea.ameng.dev/terms/bento-grid.md)：Bento 用格子大小表达主次、拼成整齐矩形；瀑布流的位置由补位规则产生，适合浏览
  - [网格错峰](https://idea.ameng.dev/terms/staggered-grid.md)：网格错峰是入场动画；瀑布流是卡片的排布方式
- 相关：[小红书封面怎么写](https://idea.ameng.dev/terms/describe-xhs-cover.md)

## 来源与延伸阅读

- [Masonry · 瀑布流布局库](https://masonry.desandro.com/)
- [MDN · CSS Masonry layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout)

网页版（含演示）：https://idea.ameng.dev/terms/masonry-grid