浮动布局会让图片“卡住”是因为float不感知后续元素高度，导致右侧图片被高图顶至下一行形成空白；现代可用column-count或Grid替代，真瀑布流需JS动态追踪列高。
浮动布局为什么会让图片“卡住”
因为 float 本身不感知后续元素高度，当左边一列出现一张特别高的图，右边新图片会试图贴着它顶部对齐，但若高度不够，就会被“顶”到下一行空隙里，形成大片空白——这不是 bug，是浮动的天然行为。
- 常见错误现象：
margin没生效、图片错位、底部留白巨大、响应式后更混乱 - 使用场景：老项目兼容 IE8–9，或仅需简单两栏错落，不追求严格等宽/等高对齐
- 性能影响：无重排开销，但维护成本高；
clear: both加多了反而触发频繁重排
用 column-count 替代浮动更靠谱
现代 CSS 多列布局能自动折行、按内容流分配高度，比浮动更接近瀑布流直觉，且无需 JS 计算。
- 关键参数：
column-count: 3控制列数，column-gap: 1rem设间隙，break-inside: avoid防止图片被截断 - 兼容性：Chrome 50+、Firefox 52+、Safari 10.1+，IE 完全不支持（别硬塞
-webkit-前缀） - 注意点：图片必须设
width: 100%，否则会溢出单列；不能控制每列首图位置，顺序完全由 DOM 顺序决定
article {
column-count: 3;
column-gap: 1rem;
}
article img {
width: 100%;
break-inside: avoid;
}
真瀑布流必须靠 JS 算高度差
纯 CSS 无法动态比较各列底部 Y 坐标，所以得用 JS 把图片按最短列依次插入——不是“计算尺寸”，而是“追踪列高”。
- 核心逻辑：维护一个数组记录每列当前总高度，每次取最小值那列插入新图
- 容易踩的坑：
offsetHeight在图片未加载完成时为 0，务必监听img.onload或用IntersectionObserver触发重排 - 性能提示：批量插入时缓存列高数组，避免每张图都查 DOM；防抖窗口 resize，否则频繁重排
- 示例片段：
const heights = [0, 0, 0]; imgs.forEach(img => { const minIdx = heights.indexOf(Math.min(...heights)); container.children[minIdx].appendChild(img); heights[minIdx] += img.offsetHeight; });
Grid 布局现在其实够用了
如果目标浏览器明确支持 display: grid，用 grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) + grid-auto-flow: dense 能覆盖大多数“视觉瀑布流”需求。
立即学习“前端免费学习笔记（深入）”；
- 优势：不依赖 JS、无加载时序问题、天然响应式
- 限制：
grid-auto-flow: dense可能打乱 DOM 顺序（SEO/可访问性需留意），且无法像 JS 方案那样精确控制“哪张图去哪列” - 关键差异：它不是按列堆积，而是按网格轨道自动填空，所以小图会自动补上前几行的空缺，视觉上更紧凑
