column-count 无法实现真正瀑布流，因其按文本流顺序排列、图片跨列错位、留白严重且不支持响应式重排；可靠方案是 css grid 模拟或 js 库如 masonry.js。
直接用 column-count 做图片瀑布流，行不通——它不支持子元素跨列对齐，图片会硬切、错位、留白严重，且无法响应式重排。
为什么 column-count 不能真正实现瀑布流
浏览器把容器当成“报纸栏”，按文本流顺序逐个塞图片，遇到高度不一致的 <img> 就卡住换列，结果是：顶部对齐但底部参差，中间出现大片空白，点击区域和视觉顺序错乱。更麻烦的是，column-count 对 display: inline-block 或 float 的图片完全失效，必须用 display: inline（默认），导致 margin 和 width 计算异常。
常见错误现象：
- 图片被截断（尤其设置了
height或object-fit） - 列宽随窗口缩放突变，但图片不重新分布（无重排机制）
- 鼠标悬停或懒加载触发后，布局塌陷或错列
替代方案：CSS columns + break-inside: avoid 的有限补救
如果非要用原生 CSS 模拟，至少得加两道约束：
- 给图片容器（如
<figure></figure>或<div class="item">）设 <code>break-inside: avoid，防止单张图被劈成两半 - 显式设置
column-gap（不能依赖默认值），否则小屏下 gap 为 0，列紧贴 - 图片必须用
width: 100%，不能设固定px宽，否则在窄列里溢出
示例最小可行结构：
.masonry {
column-count: 3;
column-gap: 1rem;
}
.masonry .item {
break-inside: avoid;
margin-bottom: 1rem;
}
.masonry img {
width: 100%;
height: auto;
display: block;
}
注意：break-inside: avoid 在 Safari 旧版本和部分安卓 WebView 中不支持，需加 -webkit-column-break-inside: avoid。
真正可靠的做法：用 display: grid 模拟瀑布流（CSS-only）
Grid 本身不原生支持瀑布流，但配合 grid-auto-flow: dense 和固定行高 + grid-row-end 手动控制，可逼近效果。不过更实用的是「伪瀑布」：用 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 配合 grid-auto-rows: 10px（占位）+ 图片自身高度撑开，视觉上接近。
关键点：
- 放弃等高行，接受每列高度不同 —— 这才是瀑布流本质
- 用
aspect-ratio控制图片比例，避免拉伸变形 - 禁用
grid-auto-flow: row（默认），改用grid-auto-flow: column，让新项优先填下一列顶部
简写示例：
.grid-masonry {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
grid-auto-flow: column;
grid-auto-rows: 10px;
gap: 1rem;
}
.grid-masonry img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
}
实际项目中建议直接上 JavaScript 库
真·瀑布流需要计算每列当前高度、插入最短列、动态更新位置，CSS 无力处理。Masonry.js 是最成熟的选择，但它依赖 JS 注入 position: absolute，与现代 CSS 脱节；更轻量的 vanilla-masonry 或 CSS Masonry（Chrome 103+ 支持 display: grid; grid-template-rows: masonry;）才是未来方向。
当前兼容性现实：
-
display: grid; grid-template-rows: masonry仅 Chrome/Edge ≥103，Firefox 未实现，Safari 无计划 - 若需全兼容，仍得靠 JS：监听
imagesLoaded后调用masonry.layout()，否则图片尺寸未定就计算，错位不可避免 - 服务端渲染（SSR）场景下，JS 方案首次加载必闪，必须配合骨架屏或服务端预计算列高
最易忽略的一点：所有方案都依赖图片有明确宽高属性（width/height HTML 属性或 CSS 固定尺寸），否则懒加载完成前容器高度为 0，瀑布流计算全部失效。
