L-03

瀑布流

Masonry

卡片高度不齐，自动落进最短的那一列，底部不留大洞。

↕ 自己动手试试

L-03形态固定舞台播放手动触发Masonry

参数工作台

列数3列间距10px卡片基准高度64px数值越大高度差越明显，错落感越强布局方式

随参数实时更新

做一个瀑布流（masonry）列表：3 列，列间距 10px，条目高度围绕 64px 参差排布，每个条目加 break-inside: avoid，别让卡片被从中间劈开跨列；顺序按列从上往下填，窄屏自动降到 2 列。不要用固定高度把每格拉齐，那就不是瀑布流了。

适用场景：列表 / 卡片 / 页面

和「普通网格 grid」的区别
grid 的行是所有列共享的，同一行的卡片从同一条水平线开始，矮卡片下方留空；瀑布流每列各自堆叠，下一张紧接上一张下面，列与列之间不共享行线。
和「等高等宽卡片墙」的区别
那种是规则网格，看上去整整齐齐；瀑布流的看点恰恰是高度参差、按列填充。

CSS 多列（column-count）是列优先填充：内容先填满第一列再进第二列，做无限滚动时新内容会全挤在最后一列，需要改成用 JS 每次插入当前最短的那一列
多列布局里每个条目要写 break-inside: avoid，否则卡片会被从中间劈开、跨到下一列去
不要为了对齐给卡片固定高度，那样就退化成普通网格了
列数只在断点处切换，不要跟着容器宽度实时变，否则拖动窗口时卡片会来回跳

瀑布流是静态排版，不产生动效；若条目带入场动画，prefers-reduced-motion: reduce 时直接以最终排布出现。