瀑布流
Masonry
初级通用瀑布流（Masonry）是一种让不同高度的内容卡片按列紧凑排列的页面布局。它解决图片、作品等内容高度不一时，普通网格容易留下大片空白的问题，例如图片灵感库。
你可能会说：「我想把高矮不一的图片卡片排成几列，尽量填满空隙，不要每一行都被最高的那张撑开。」
动手看看图片灵感库的卡片墙
海边日落
山间小屋
街角咖啡馆
雨后花园
海边民宿
旧书店
排列方式 display
这面灵感墙有高矮不同的卡片。切换排列方式，再调节「海边民宿」的高度，看看空白会出现在哪里。
普通网格按行排列：第一行要等最高的「山间小屋」结束，第二行才能开始，较矮的卡片下方因此会留白。
要点瀑布流是怎么排布卡片的？
- 1
卡片等宽但高度可以不同
你可以让图片保持原有比例，再把标题、说明放进卡片。因为每张卡片的内容不同，高度也会不同；瀑布流不要求它们在每一行的底部对齐。
- 2
后续卡片填入列内空位
普通网格通常按行排列，一行的高度会受最高卡片影响。瀑布流让后面的卡片沿着各列接续排列，所以列与列之间的卡片边界可以错开，空白也更少。
- 3
先约定顺序再选择实现方式
不同实现方式可能让视觉顺序和键盘阅读顺序不一致。和 AI Agent 协作时，你可以先说清楚卡片按什么顺序展示，再检查窄屏列数变化后，内容是否仍容易浏览。
容易混淆的地方
瀑布流和普通卡片网格的区别在于：普通网格通常按行对齐，瀑布流允许相邻列的卡片上下错开，以容纳不同高度的内容。它也不等于无限滚动：前者决定卡片怎么摆，后者决定用户往下浏览时是否继续加载；两者可以同时使用，也可以分开使用。
什么时候用
适合用
- 做摄影作品展示页时，照片比例各不相同，你想保留原图比例，又希望页面少留大块空白。
- 做灵感收藏工具时，用户保存的截图、图片和简短笔记高度不一，主要通过浏览来发现内容。
- 做商品搭配社区时，帖子以图片为主，卡片说明长短不同，用户先看整体内容再点开详情。
不适合用
- 做订单后台时，用户需要横向比较价格、状态和时间；用表格让同类字段对齐更方便。
- 做有明确先后关系的操作指引时，错列会让阅读路径不清楚；用单列列表或步骤条更合适。
- 做每张卡片都要在同一位置比较指标的页面时，用按行对齐的卡片网格更容易扫读。
练一练选一个答案，看看解释
你在做图片灵感库，图片比例不同，用户主要是浏览和点开收藏。产品还要求能用键盘依次访问卡片。你会怎么向 AI Agent 描述布局？
让 AI 帮你做复制给 AI Agent 直接用
请把图片灵感库的卡片列表做成响应式瀑布流布局：图片保留原始比例，卡片高度随内容变化，窄屏减少列数。保持内容顺序可理解、键盘访问顺序与视觉顺序尽量一致，并说明你的实现方式及其限制。