瀑布流 Masonry Layout

高度不一的卡片按列排布、紧凑填满，像砌墙一样参差错落

块 A

块 B

块 C

块 D

块 E

块 F

**瀑布流（Masonry）**因 Pinterest 而流行：卡片宽度一致、高度随内容（图片原始比例）变化，按列排布并尽量填满空隙——像石匠砌墙（masonry 的本义）。它解决了“图片比例不一”的展示难题：不裁剪、不变形。

什么时候用：图片社区、电商选品流、作品集。文字卡片用瀑布流是灾难（阅读顺序被打乱），它天生属于“浏览型”内容。

对 AI 说清楚的三要素：① 列数（2~4 列，移动端 2 列）；② 卡片等宽不等高；③ 实现（CSS columns 简单但顺序按列排；JS 计算按行插入，注意和 AI 说清你要哪种——浏览场景两者皆可）。

图片列表采用瀑布流布局（Masonry）：CSS columns: 3 实现，
卡片高度随内容自然变化、break-inside: avoid，
新加载内容自动补进最短列，无横向拉伸变形。