纯 CSS 瀑布流唯一真正按列高均衡分配的方案是 column-count 配合 break-inside: avoid，浏览器原生追踪各列高度并自动将新项插入最短列，需容器设 height/max-height、子项为普通块级流、禁用 flex/grid 包裹、统一用 column-gap 控制间距、图片需预设尺寸或监听加载。
纯 CSS 瀑布流唯一真正按列高均衡分配的方案，就是 column-count 配合 break-inside: avoid —— 它不靠 JS，也不靠视觉错觉，浏览器原生就支持列高最小化填充。
为什么 column-count 能做出“真瀑布流”
多列布局不是把元素按顺序塞进第 1 列、第 2 列……而是持续追踪每列当前高度，下一项自动插入最短列。比如三列当前高度是 620px、580px、710px，新卡片就会进第 2 列。这个逻辑由浏览器引擎（Blink/WebKit/Gecko）原生实现，无需任何 JS 干预。
常见错误现象：column-count 设了但页面还是单列——大概率是容器没设 height 或 max-height，导致浏览器认为“空间无限”，退化为 1 列；或者用了 flex/grid 布局子项，破坏了文档流，使列分配失效。
- 必须用普通块级流子元素（
<div>、<p>、<img>等），不能套在display: flex容器里 -
column-count和column-width不能同时设具体值，否则后者被忽略 - 响应式建议优先改
column-count：比如@media (max-width: 768px) { column-count: 2; }
break-inside: avoid 不是可选项，是必填项
没有它，长卡片会被硬生生从中间截断，上半截在第 1 列，下半截跳到第 2 列底部——这是 column-count 最典型的翻车现场。
立即学习“前端免费学习笔记（深入）”；
常见错误写法：break-inside: avoid-column（仅 Safari 旧版部分支持，Chrome/Firefox 不认）；或只加在容器上，没加在每个 .item 上。
- 必须对每个瀑布流子项（如
.item）单独设置break-inside: avoid - 兼容性写法建议补全前缀：
-webkit-column-break-inside: avoid、page-break-inside: avoid（虽已过时，但对 IE11/旧 Safari 仍有用） - 如果子项内含 Flex/Grid 布局，
break-inside仍生效；但若子项自身是position: absolute，则完全脱离文档流，break-inside失效
column-gap 控制间距，别碰 margin
column-gap 是列与列之间的空白通道，浏览器会把它算进列宽分配逻辑里；而用 margin-bottom 模拟列间空隙，会导致子项实际占用高度变大，干扰列高计算，最终让“最短列”判断失准。
常见错误现象：卡片之间空隙忽大忽小、列高明显不均衡——八成是混用了 margin 和 column-gap。
- 统一用
column-gap: 16px（或任意值），不要给.item加margin-bottom - 想控制卡片内边距？用
padding，它不影响列高判定 -
column-gap支持单位包括px、em、rem，但不支持百分比
图片瀑布流要额外注意 object-fit 和加载时机
图片本身宽高比不一致时，仅靠 column-count 无法防止拉伸变形；且图片异步加载完成前，高度为 0，会导致列高误判、后续卡片错位。
常见错误现象：页面刚打开时瀑布流错乱，滚动一下才恢复正常——基本是图片未加载完就渲染导致的。
- 给图片加
width: 100%; height: auto;+object-fit: cover;（需父容器设固定宽高或aspect-ratio） - 懒加载图片务必监听
load事件，并触发column-count重排（可强制修改容器style.columnCount触发重绘） - 服务端渲染场景，建议预设图片占位高（如
min-height: 200px），避免首屏闪动
真正难的不是写对那几行 CSS，而是理解 column-count 的列高平衡只作用于**连续文档流中的块级元素**——一旦中间插了个 position: sticky 导航栏，或用 display: contents 打散结构，整个瀑布流逻辑就崩了。这种隐性依赖，调试时最难定位。
