F2.09.1masonry for variable-size media设计
瀑布流适合尺寸不一的视觉内容
别名: 瀑布流 · masonry · Pinterest 布局
概念解释
照片、镜头、针图，宽高比就是内容的一部分：裁成统一方块会切掉构图，留黑边又浪费。**瀑布流（masonry）**按最短列往下堆，让每张图保住自己的高，同时把竖直空隙填上。它适合「看图发现」这种浏览，不适合比价格、读标题。
等高卡片栅格是另一件事：那是在框异构对象。瀑布流的变量是媒体自己的高。若高度差来自有的标题两行、有的五行，那只是参差的文本，不该用瀑布流来收拾。
机制
等高网格只有两条路：裁切，或信箱留白。裁切伤害构图；留白在窄列里变成一串空洞。瀑布流放弃「行」，改成 n 条独立的列，新项进当前最短的那条。打包效率来自不再对齐行高，代价是不再有行——阅读顺序和位置稳定性是后面两条的账。
「视觉内容」是关键限定：用户要看见物件的真实形状。商品主图若一律 4:3 拍摄，瀑布流没有媒体可保，只是在制造高低错落的装饰。
边界
搜索结果要按相关度严格向下读，瀑布流会把第 1 项和第 2 项放到不同列、不同高度，相关度顺序被空间打散。表格、邮件、设置不行。视频若带固定控件条，高度被控件锁死，瀑布流也无益。
少量（一列）时瀑布流退化成普通长条，没有打包可谈。列数随宽度增加，才出现它要解决的空洞。
怎么落地
- 先问：若把所有项强制成同一宽高比，会不会丢掉必须看见的构图？会，才启用瀑布流；不会，用等高网格或列表。
- 元数据（价格、店名）压到一两行，不要让文案成为高度的主变量。
- 验证：抽 30 张真实素材，一版强制 1:1 裁切，一版瀑布流。请人指出裁掉了主体的张。若几乎指不出来，瀑布流没有媒体理由。若指得出，再看瀑布流版是否靠文案长短在制造第二套高低——有的话把文案截到固定行数，只让图决定高。