column-count是唯一靠谱的纯css瀑布流方案，需设column-count、column-gap、break-inside: avoid三属性，容器禁用flex，子项禁脱离文档流，图片需预设尺寸防抖动。
flex-direction: column + flex-wrap: wrap 根本不 work
这不是兼容性问题，是 Flexbox 规范明确不支持 column 主轴下的换列行为。你写 display: flex; flex-direction: column; flex-wrap: wrap; height: 600px，浏览器实际表现只有三种：Safari 和旧版 Chrome 直接忽略 flex-wrap，退化为单列堆叠；设了 height 后部分浏览器强制截断内容；即使看似分了多列，所有列会被拉齐到最高列高度——完全不是瀑布流，而是“等高栅格”。
column-count 是唯一靠谱的纯 CSS 方案
它原生支持内容按列自动填充，不依赖容器高度，也不需要 JS 干预列分配。关键就三行：
.masonry {
column-count: 3;
column-gap: 16px;
}
.masonry-item {
break-inside: avoid;
max-width: 100%;
}
注意：break-inside: avoid 防止图片被截断；max-width: 100% 替代 width: 100%，否则图片会撑满整列；容器绝不能加 display: flex，否则直接禁用多列渲染。
真要 Flex 布局？必须 JS 控制列高平衡
所谓“Flex 瀑布流”，本质是用 JS 模拟列调度：外层 display: flex; flex-wrap: wrap 横向排列多个列容器，每个列容器自身是 display: flex; flex-direction: column。
- 必须维护一个
columnHeights数组，每次插入前找Math.min(columnHeights)对应索引 - 不能用
index % 2静态分配——图片加载延迟、字体重排都会立刻暴露列高失衡 -
img加载完成前高度为 0，必须监听load事件或用IntersectionObserver触发真实高度更新 - 列容器建议加
contain: layout style减少重排开销
图片加载时机才是崩盘主因
几乎所有瀑布流失效，都不是因为 CSS 写错，而是图片异步加载导致高度突变。JS 拿到的初始高度是 0 或默认值，插入后列突然拉高，视觉跳变严重。
实操建议：
- 服务端返回宽高信息时，提前注入 HTML，如
<img data- style="max-width:90%"> - 前端用
aspect-ratio: 3/4占位，或设固定宽高比容器 - 避免用
window.onload，它等全部资源（含广告脚本），延迟太高；优先用img.addEventListener('load', ...) - DOM 顺序 ≠ 视觉顺序——JS 分组方案下，屏幕阅读器可能跨列拼读，语义混乱
最常被忽略的点：不是怎么写 Flex，而是怎么让图片高度在布局前就可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
