column-count 瀑布流留白因浏览器按文本流顺序填列、不均衡列高所致；需配合 column-fill: auto、避免 break-inside: avoid，并用 JS 维护列高数组实现精确控制。
column-count 为什么元素高度不一致时会留白
用 column-count 做瀑布流，本质是把容器当“报纸栏”切分，浏览器按文本流顺序逐个塞子元素——它不关心每个 div 高度，只按列宽折行。一旦某列最后一个元素跨列（比如高度突增），后续元素就会从下一列顶部开始，导致前几列底部空出大块空白。
常见错误现象：column-gap 设了 20px，但实际列间距离忽大忽小；最后一列内容明显少，且顶部对齐、底部悬空。
- 必须配合
column-fill: auto（默认就是 auto，但显式写上更稳妥），避免浏览器强行均衡列高 - 子元素不能设
break-inside: avoid，否则会整块跳到下一列，加剧留白 - 图片或异步加载内容需提前设好
aspect-ratio或固定height，否则重排时 column 会反复计算，触发闪烁
绝对定位 + JS 计算列高是最可控的方案
纯 CSS 的 column 属性对瀑布流只是“模拟”，真要精确控制每列末尾位置、支持懒加载或动态增删，得靠 JS 维护列高数组，再给每个元素设 position: absolute 和对应 top/left。
使用场景：商品卡片、博客文章列表、带交互的画廊——尤其当卡片内有折叠面板、视频播放器等可变高内容时。
立即学习“前端免费学习笔记（深入）”；
- 初始化列高数组，如
const colHeights = [0, 0, 0]（3 列） - 遍历每个元素，取当前最短列索引，
element.style.left = `${index * colWidth}px`，element.style.top = `${colHeights[index]}px` - 更新该列高度：
colHeights[index] += element.offsetHeight - 注意监听窗口 resize，但别直接重算全部——用
debounce+ 只更新可视区内的元素
grid-template-rows: masonry 是未来，但现在别依赖
grid-template-rows: masonry 是 CSS 新标准里真正语义化的瀑布流方案，但它目前仅 Chromium 116+（含 Edge 116+）原生支持，Firefox 仍需 -moz-masonry 前缀且行为不一致，Safari 完全不支持。
如果你的项目必须兼容 Safari 或旧版 Chrome，现在就写 display: grid; grid-template-rows: masonry 等于没写——浏览器会退回到普通 grid，所有项堆在第一行。
- 可用
@supports (grid-template-rows: masonry)做渐进增强，内部写 column 回退方案 - 别用
grid-auto-flow: dense配合 masonry，它会导致顺序错乱，和瀑布流“时间序优先”的直觉相悖 - 目前无法用 masonry 控制列宽响应式变化，
grid-template-columns必须是固定值或minmax()，不能用fr
sticky footer 卡在瀑布流里怎么处理
当瀑布流容器底部需要一个始终贴底的按钮或版权栏，用 position: sticky; bottom: 0 会失效——因为 column 布局下，容器高度由内容撑开，没有“视口底部”可粘。
绝对定位方案里倒容易解决：把 footer 元素插入到瀑布流 DOM 末尾，JS 计算完所有卡片后，取 Math.max(...colHeights) 作为容器总高，再设 footer.style.top = `${maxHeight + gap}px`。
- 不要给 footer 设
position: absolute后再用bottom: 0，它会相对于最近定位祖先（通常是 body），而不是瀑布流容器 - 如果用 column 方案，只能靠伪元素 +
margin-bottom模拟，但高度不可控，适合纯静态内容 - React/Vue 项目中，footer 最好和瀑布流共用同一状态，避免因异步渲染时机不同导致错位
列高数组的手动维护、resize 时的节流粒度、以及回退方案的样式隔离——这些细节不写进组件封装里，上线后一定会在某个小屏安卓机上露出马脚。
