Masonry layout 瀑布流布局
/MAY-sun-ree LAY-owt/ · noun · 内容类模式 · #134
一种卡片网格：每列宽度相同，卡片保留各自的高度，所以各列结束的位置不同，但卡片之间没有空隙，像砌墙的石头。Pinterest 让它广为人知；相册、作品集和博客常用它展示形状不一的图片。和 bento 网格不同，它的排布由内容决定，而不是事先排好。
别名：瀑布流。
你可能会这样叫它
- “Pinterest 那种图片墙”
- “高矮不一的图片网格”
- “小红书首页那种双列卡片”
- “错落排列的卡片”
……它的名字是 瀑布流布局（Masonry layout）。
常见问题
瀑布流布局是什么意思？
瀑布流布局（masonry layout）是一种列宽相同、卡片高度各不相同的网格：每张卡片紧接着放进当前最短的一列，所以各列参差不齐，但卡片之间没有空隙。Pinterest、小红书首页的双列卡片都是瀑布流，适合展示比例不一的图片。
瀑布流布局优缺点有哪些？
优点是能紧凑地展示高矮不一的图片，不留空白，配合无限滚动适合随意浏览。缺点是阅读顺序容易乱，眼睛和键盘焦点会在列之间跳；没有固定的行，不好比较内容，也不方便找回刚才看到的那张；图片要先占好高度，否则加载时页面会跳。
代码里叫什么
| Web (CSS) | column-count break-inside: avoid display: grid-lanes 原生瀑布流是 display: grid-lanes，目前只有 Safari 26.4 及以上支持；其他浏览器用多列布局或 JS 库 |
|---|---|
| JavaScript | Masonry imagesLoaded |
| Jetpack Compose | LazyVerticalStaggeredGrid |
| Android (Views) | StaggeredGridLayoutManager |
| Flutter | MasonryGridView 来自 flutter_staggered_grid_view 包 |
| SwiftUI | Layout 没有瀑布流视图：自定义 Layout，或在 HStack 里放两列 VStack |
复制给 AI 编程工具
把这些图片排成瀑布流：等宽的列（手机 2 列，宽屏 3 到 4 列），每张卡片保持图片原有的宽高比，下一张放进当前最短的那一列。图片加载前先占好高度，避免页面跳动；阅读顺序和 Tab 顺序尽量和视觉顺序一致；快滚到底时继续加载更多卡片。