不能靠 flex-direction: column + flex-wrap: wrap 实现真正的瀑布流图片布局，因为 flexbox 规范不支持 column 主轴下的“填最短列”，浏览器实际表现为单列堆叠或等高列拉齐，且图片高度动态变化导致布局错乱。
不能靠 flex-direction: column + flex-wrap: wrap 实现真正的瀑布流图片布局。浏览器根本不按你预期换列，强行写只会导致内容堆顶、截断、拉齐高度或渲染错乱——这不是兼容性问题，是 Flexbox 规范本身就不支持 column 方向下的“填最短列”行为。
为什么 flex-direction: column + flex-wrap: wrap 在图片瀑布流中必然失败
Flex 规范明确：当主轴为 column 时，flex-wrap 对“换列”无定义。实际表现因浏览器而异：
- Safari 和旧版 Chrome 直接忽略
wrap，退化为单列纵向堆叠 - 即使某些版本看似分了多列，所有列会被强制拉齐到最高列高度（即“等高列”），完全失去瀑布流的错落感
- 图片加载前高度为
0或默认值，flex-basis若设为auto或不设，子项全挤在第一列；设死高度（如flex-basis: 220px）又无法适配真实图片尺寸 - 容器用
height: 600px或height: 80vh后，窗口缩放或图片异步加载会触发重排，列高失衡、留白或溢出
真正能跑通的 Flex 瀑布流结构：外层 row wrap + 内层 column 列容器
这不是“伪方案”，而是唯一符合规范、稳定可控的做法。核心是把“列”变成 DOM 元素，而非靠 flex 自动拆分：
- 外层容器设
display: flex; flex-wrap: wrap，横向排列多个.column容器 - 每个
.column是独立 flex 容器，设display: flex; flex-direction: column，内部卡片垂直堆叠 - 卡片本身不参与跨列调度，所以必须由 JS 控制“往哪一列塞”——维护一个列高数组，新图片加载完成（监听
load或用IntersectionObserver）后再插入当前最短列 - 避免用
index % 2硬分，否则图片加载慢、字体重排、响应式高度变化都会立刻暴露列高不均
图片加载导致瀑布流失效的典型陷阱
纯 CSS 方案在图片场景下几乎必然塌陷，关键不在布局，而在高度不可控：
-
<img>标签未设height或aspect-ratio时，初始渲染高度为0，JS 拿到的列高是错的 - 用
getBoundingClientRect().height获取高度前，必须确保图片已加载完成；否则插入后列突然变高，视觉跳变 - 不要依赖
window.onload，它等全部资源（含广告、埋点脚本），延迟太高；优先用img.addEventListener('load', ...)或decode()API - 服务端若返回图片宽高信息，可提前注入 HTML（如
data-height="320"），减少 JS 动态探测开销
真正难的不是写几行 CSS，而是让每张图片在正确时机、被放进真正最短的那列——这个判断必须基于真实渲染高度，且要扛住加载、缩放、字体加载三重干扰。任何试图绕过 JS 高度管理的“纯 Flex 瀑布流”，在图片场景下都只是暂时没出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
