纯 css 无法可靠实现真正响应高度的瀑布流；本质是 flex/grid 按 dom 顺序填充而非按列高动态分配，gap 和 dense 均无法解决列高差异，需 js 实时管理列高或接受伪瀑布流方案。
纯 CSS 无法可靠实现真正响应高度的瀑布流；所谓“间隙不一致”，本质是误用了 flex-direction: column 或 grid-auto-flow: row 导致的 DOM 顺序填充，不是样式能修好的问题。
为什么 gap + flex-wrap 不能解决瀑布流间隙
很多人试过 display: flex + flex-wrap: wrap + gap，发现三列图片高度不一时，底部依然参差、列间出现大片空白。这是因为：
-
flex-wrap: wrap按 DOM 顺序从左到右、从上到下填满每一行，不感知子项真实高度；第1行放完3张图后，第2行才开始放剩下的——它不是“把新项塞进当前最短列”，而是“按顺序换行” -
gap只控制相邻项之间的间距，对列高差异毫无干预能力 - 图片加载异步，初始渲染时
height: 0，flex 容器按错误高度排布，后续重排会引发跳动甚至错位
grid-auto-flow: dense 也不等于瀑布流
用 display: grid + grid-template-columns: repeat(3, 1fr) + grid-auto-flow: dense 确实能让网格项“往前填空”，但前提是所有子项有明确 grid-row: span N 声明。否则：
- 浏览器仍按 DOM 顺序逐个放入第一行，
dense不会主动重排已放置的项 - 没有显式行高或跨度时，
dense几乎不生效，视觉效果和普通 grid 无异 - 移动端 Safari 对
grid-auto-flow: dense的支持不稳定，尤其在动态插入内容时容易漏项
真正可用的纯 CSS 替代方案：CSS Container Queries + aspect-ratio
如果你必须避免 JS，且能接受“伪瀑布流”（即视觉近似、不严格按高度优先），可结合以下技术降低间隙感知：
- 给每张图容器设
aspect-ratio: 4/3（或统一比例），配合object-fit: cover，强制视觉高度一致 - 用
container-type: inline-size配合@container (min-width: 320px)动态切换列数，减少单列内高度差异放大效应 - 禁用图片默认 inline 间隙：
img { display: block; vertical-align: top; } - 父容器加
overflow: hidden裁掉溢出部分，掩盖轻微错位（仅限内容可裁场景）
注意：aspect-ratio 在 iOS 15.4+ 和 Android Chrome 101+ 支持良好，旧版需 fallback 到 padding-top 百分比 hack。
最稳解法仍是 JS 驱动的列高管理
所谓“修复间隙”，其实是让每列总高度尽可能接近。这必须靠 JS 实时跟踪：
- 维护一个
columnHeights = [0, 0, 0]数组，每次插入新图前找Math.min(...columnHeights)对应索引 - 监听
img.onload或用IntersectionObserver触发updateHeight(colIndex, img.offsetHeight) - 避免在
v-for/ngFor中用index % 3硬分——那只是静态切分，不是瀑布流 - uni-app 场景推荐封装为
useWaterfall(columns = 3)组合式函数，内部用ref响应式更新
别被“纯 CSS 瀑布流”的标题骗了。间隙不一致不是样式写错了，是你在用线性结构模拟二维布局——这个根本矛盾，CSS 目前无解。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
