移动端双栏瀑布流一高一低的根本原因是 column-count 和 flex-direction: column 均不感知真实渲染高度，图片加载延迟、字体重排等导致列高瞬间失衡；应改用 column-width 配合 max-height、break-inside: avoid、column-gap 及 js 重算确保高度同步。
为什么移动端双栏瀑布流总是一高一低
根本原因是 column-count: 2 或 flex-direction: column 都不感知真实渲染高度——前者按文本流顺序切分，后者按 DOM 顺序堆叠。图片加载延迟、字体重排、异步内容插入都会让列高瞬间失衡，视觉上就是左列堆满、右列大片留白，或者中间断层。
用 column-width 替代 column-count 控制列数
硬写 column-count: 2 在小屏下极易导致列过窄、文字挤成一团，或因容器宽度波动触发浏览器重算列数，加剧列高差。更稳的做法是：
-
column-width: 300px（推荐值），让浏览器自动算出至少 1 列，窄屏下自然退为单列 - 必须配
max-height，比如max-height: 80vh，否则无高度约束时直接退化为单列 - 避免用
min-height，它不触发分栏逻辑 - iOS Safari 对无高度容器 fallback 行为更激进，几乎必然单列
防止卡片被截断和列高误判的关键 CSS
卡片跨列被切开、margin-bottom 导致列高计算错乱，是列高差的隐形推手：
- 每张卡片外层必须加
break-inside: avoid；旧版 Safari 要补-webkit-column-break-inside: avoid - 禁用
margin-bottom模拟间距，统一用column-gap: 16px控制列间空隙 - 图片必须设
width: 100%; height: auto，否则原始尺寸撑破列宽引发错位 - 动态插入新卡片后，需手动触发重排：
container.style.columnCount = container.style.columnCount
图片加载完成前如何避免列高塌陷
图片未加载时高度为 0，column-count 会按这个错误高度分配内容，等图一出来，整列就“弹”高了，左右列高差立刻拉大：
- 监听图片
load事件，触发后调用container.style.columnWidth = container.style.columnWidth强制重算 - 或用
IntersectionObserver检测图片进入视口后再加载，并在回调里重算 - 懒加载场景下，别等所有图加载完再渲染容器，先占位（如用
aspect-ratio或 padding-top 技巧）
列高差不是布局问题，是高度同步问题。CSS 只负责排列，JS 才能真正响应真实渲染高度——哪怕只用一行重算代码，也比纯样式硬扛可靠得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
