纯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 结构 <p>这是最轻量、兼容性最好、无需 JS 的方案。核心是提前知道图片总数，或服务端渲染时按奇偶索引拆分。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <pre class="brush:php;toolbar:false;">&lt;div class=&quot;masonry&quot;&gt; &lt;div class=&quot;col-left&quot;&gt; @@##@@ @@##@@ @@##@@ &lt;/div&gt; &lt;div class=&quot;col-right&quot;&gt; @@##@@ @@##@@ @@##@@ &lt;/div&gt; &lt;/div&gt;</pre> <ul> <li>左右两列用 <code>float: left 或 display: inline-block 即可实现基础双列；现代写法推荐 display: flex 包裹两列

每张 <img src="1.jpg" alt=""> 必须设 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 src="3.jpg" alt=""> 设 aspect-ratio: 4/3（按实际比例调整），让浏览器预留空间
• 兼容旧版：用 padding-top 百分比占位，例如 padding-top: 75%（对应 4:3） + position: relative + img 绝对定位覆盖
• 避免用 min-height，它不参与流式计算，仍会导致错位
• 如果后端能返回宽高，就写成 <img src="5.jpg" alt="">，浏览器可直接计算 aspect ratio

实际项目里，手动分列最稳；column-count 仅适合静态、图片尺寸统一、且不介意轻微错位的场景。真正动态增删图片，还是得上 JS 库（如 Masonry），但那就超出纯 HTML/CSS 范畴了。