瀑布流

Masonry Layout

布局模式也叫：瀑布流布局、砖墙布局、Pinterest 布局、Masonry

一句话：卡片等宽但高度随内容变化，新卡片总是填进最短的一列，整体错落像一面砖墙，常见于图片社区和种草类应用。

详细解释

瀑布流把页面分成固定的几列（比如桌面 4 列、手机 2 列），每张卡片宽度相同，高度由图片原始比例和文字长短决定。新卡片总是放进当前最矮的那一列，所以整体参差错落，像一面砖墙。小红书、Pinterest、花瓣的首页都是这种布局。

它的好处是保留每张图片的原始比例、不用裁切，同时页面几乎没有空隙，一屏能放下很多内容，配合无限滚动很适合「随便逛逛」的浏览场景。

代价是阅读顺序不明确：条目左右跳着排，用户很难按顺序查看，也很难记住某条在哪，更没法按字段比较。和卡片网格相比，卡片网格等高对齐、秩序感强；瀑布流更自由、更省空间，但只适合以视觉浏览为主的内容。

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

用瀑布流（Masonry）展示笔记列表：桌面 4 列、平板 3 列、手机 2 列，列间距 12px；卡片等宽，高度随图片原始比例变化，图片不裁切，下方是最多两行的标题和作者头像、昵称、点赞数。新卡片放进最短的一列，图片加载前按比例预留高度，滚动到底部自动加载更多。

页面分成几条等宽的列，高度不一的卡片依次填入当前最短的一列，各列底部不对齐，整体呈错落的砖墙状。