纯CSS无法实现真瀑布流，因Grid/Flexbox不支持按列高动态分配元素；需手动将图片按奇偶索引分入左右两列容器，再用Flex/Grid布局控制间距与对齐。
为什么 CSS Grid 的 grid-template-columns: repeat(2, 1fr) 不等于瀑布流
双列图片交错排列 ≠ 简单的两栏等宽布局。真瀑布流要求每列高度不固定、图片按顺序“掉进”当前更短的那列，视觉上错落有致。CSS Grid 或 Flexbox 原生无法自动计算列高并动态分配元素——它只会按 DOM 顺序逐行/逐列填满，导致第二张图一定在第一张下方，无法交错。
所以，纯 CSS 实现「交错」效果，必须放弃“自动分配”，改用显式控制：把图片手动分组，分别塞进左右两列容器，再靠 CSS 控制列内图片垂直间距和对齐方式。
-
display: grid或display: flex只能做“伪瀑布”，适合高度相近的图；高度差异大时必然出现明显空隙 - 真正交错依赖 DOM 顺序干预：左列放第 1、3、5… 张图，右列放第 2、4、6… 张图
- 移动端需注意
gap和max-width配合，否则小屏下两列挤压变形
用两个 <div> 手动分流图片的 HTML 结构
这是最轻量、兼容性最好、无需 JS 的方案。核心是提前知道图片总数，或服务端渲染时按奇偶索引拆分。
<div class="masonry">
<div class="col-left">
<img src="1.jpg" alt="">
<img src="3.jpg" alt="">
<img src="5.jpg" alt="">
</div>
<div class="col-right">
<img src="2.jpg" alt="">
<img src="4.jpg" alt="">
<img src="6.jpg" alt="">
</div>
</div>
- 左右两列用
float: left或display: inline-block即可实现基础双列；现代写法推荐display: flex包裹两列 - 每张
<img>必须设width: 100%和height: auto，避免拉伸失真 - 列之间用
gap（Flex/Grid）或margin控制横向间距，别用padding，否则影响宽度计算
column-count: 2 能否直接用？小心图片被截断
CSS 多列布局（column-count）看起来最接近瀑布流，但它会强行切断内容——图片若高度超过单列剩余空间，就会被截断或跨列撕裂。
立即学习“前端免费学习笔记（深入）”；
- 必须配合
break-inside: avoid防止图片断开：img { break-inside: avoid; } - 但即便如此，Chrome 和 Safari 对
break-inside支持不稳定，Firefox 表现稍好 - 列宽由容器决定，无法单独控制左右列宽度比例；响应式时列数可能意外变为 1
- 不支持图片加载后重排，新插入图片不会自动归位
图片加载后高度变化导致错位？加 aspect-ratio 或占位
异步加载图片时，初始高度为 0，浏览器先按文字流渲染，等图片载入后突然撑开，造成下方图片跳动、列高不同步。
- 最优解：给
<img>设aspect-ratio: 4/3（按实际比例调整），让浏览器预留空间 - 兼容旧版：用
padding-top百分比占位，例如padding-top: 75%（对应 4:3） +position: relative+img绝对定位覆盖 - 避免用
min-height，它不参与流式计算，仍会导致错位 - 如果后端能返回宽高，就写成
<img width="400" height="300">，浏览器可直接计算 aspect ratio
column-count 仅适合静态、图片尺寸统一、且不介意轻微错位的场景。真正动态增删图片，还是得上 JS 库（如 Masonry），但那就超出纯 HTML/CSS 范畴了。 
