正在进入 VibeHub 实训中心…/ 正在加载 AI 实战词典、互动闯关与三分钟配方
瀑布流Masonry
你可能会说
图片高矮不一样，别硬裁成一样高，矮的下面自动补上新的就行。
瀑布流是一种保持列对齐、让不同高度的卡片依次补进当前最短列的页面布局作品墙和灵感流里的图片高度各不相同，瀑布流让新卡片补进最短的空隙，页面不会出现整行留白。代价是阅读顺序按列推进而不是按行；手机端收成单列后，内容顺序需要单独验收。
也常被叫作瀑布流布局Masonry 布局Masonry Layout
你可以这样告诉 AI Agent
把作品墙改成瀑布流：列宽一致，图片保持原始比例，新图片补到当前最短的列；手机收成一列。改完后用桌面和手机各检查一次：矮图下方没有整行留白，从上往下浏览时内容顺序仍然合理。
容易混淆？这样区分
瀑布流Masonry≠卡片网格布局 Card Grid
卡片网格布局 Card Grid 保持严格行列对齐、同行等高，适合比较和扫描；瀑布流 Masonry 放弃行对齐换取紧凑，适合以看为主的浏览。
瀑布流Masonry≠Bento 便当格 Bento Grid
Bento 便当格 Bento Grid 用格子大小表达设计好的内容优先级；瀑布流 Masonry 的位置由补位规则自动产生，不表达优先级。
什么时候用
- 作品墙：摄影、插画比例不一，保持原始比例展示，见 卡片 Card
- 灵感、素材内容流：强调连续向下浏览，不需要逐行比较向下滚动继续加载
- 商品或案例封面尺寸不统一，又希望页面紧凑降噪耳机¥ 899护眼台灯¥ 199
- 纵向空间紧张：内容持续增长，补位比整行留白更省高度
什么时候不用
- 内容有严格先后顺序（步骤、时间线）：补位会打乱顺序步骤 1步骤 2步骤 4 排到了步骤 3 前面
- 需要逐行比较同类信息：列不对齐时比较成本更高，用 卡片网格布局 Card Grid
- 手机端仍保留多列：卡片被压得过窄，应收成一到两列
- 把长文列表也塞进瀑布流：阅读顺序混乱，段落难以连续读完
组成结构 · Anatomy
卡片补位
列宽保持一致，只有高度自由变化
卡片保持内容原始比例，不被裁成统一高度
下一张卡片进入当前最短的列，这也是顺序被打乱的原因
常见变体 · Variants
三列Three Columns
桌面作品墙和内容流的常见列数
两列Two Columns
窄屏或需要更大卡片预览时
单列Single Column
手机端默认形态，内容回到原始顺序
典型使用场景
摄影作品墙
插画灵感流
已收藏 236 条灵感 · 向下滚动继续加载
商品封面列表
素材模板库
延伸阅读 · 权威出处
快速练习