column-count 导致图片高度错乱的主因是浏览器按文本流分列且不等待图片加载，初始高度为0引发重排；需用 column-fill: auto、break-inside: avoid、aspect-ratio 和 min-height 等防护措施。
column-count 为什么会让图片高度错乱
用 column-count 做瀑布流，最常遇到的不是布局不出现，而是图片上下堆叠错位、间隙忽大忽小、甚至整列“塌陷”——根本原因是浏览器按文本流方式处理列，它不会主动等图片加载完成再分列，也不会感知 img 的最终渲染高度。
- 图片未设置
height或使用aspect-ratio时，初始高度为 0，column-count按“空行”切分，加载后撑开导致列内重排 -
column-gap对img无直接约束力，间隙实际由 margin 或 padding 控制，容易和列间隙叠加出意外空白 - Firefox 对
column-count中display: inline-block元素的基线对齐更敏感，可能让同一列里图片底部不齐
必须加的 CSS 保护层
光写 column-count: 3 不够，得封住几个关键漏洞：
- 给容器设
column-fill: auto（默认是balance，会强行拉平列高，反而加剧图片撕裂） - 每张图外层包一个
div，并设break-inside: avoid，防止单张图被硬生生劈成两半 - 图片本身用
width: 100%+height: auto+object-fit: cover，避免拉伸变形；若需统一缩略图尺寸，优先用aspect-ratio: 4/3而非固定height - 慎用
vertical-align，它在多列中行为不稳定；改用align-self: start（需父容器是 grid/flex）或干脆不用
图片加载完成前的视觉断层怎么补
用户滚动时看到空白或占位符跳动，不是 JS 能完全解决的，CSS 层面要提前兜底：
- 给
img设min-height: 150px（按你最小预期图高定），配合background-color: #f5f5f5和background-image: url(placeholder.svg)，比纯透明更可控 - 用
@supports (aspect-ratio: 1/1)包一层现代写法，降级到老浏览器时 fallback 为固定宽高 +font-size: 0清除图片下方空白 - 不要依赖
loading="lazy"和列布局混用——懒加载触发时机和列重排不同步，极易造成某列突然“变短”
Chrome 和 Safari 下 column-count 的兼容性雷区
看似标准的属性，在实际渲染中差异不小：
立即学习“前端免费学习笔记（深入）”；
- Safari（尤其是 iOS 15–16）对
column-count内transform或filter元素支持弱，加了模糊/阴影可能导致整列渲染异常或卡顿 - Chrome 115+ 开始对
column-span: all支持变好，但若你在画廊里插标题，h3加了该属性后，其后所有图片可能被强制归入下一列，而非跨列居中 - 移动端双击放大时，部分安卓 WebView 会忽略
column-width，只认column-count，所以别混用两者；固定列数比自适应列宽更稳
真正难的不是写出第一版瀑布流，而是让 20 张不同尺寸、不同加载速度、来自不同 CDN 的图片，在三端都保持列高大致均衡、不闪跳、不重叠——这得靠 break-inside 卡住切割点，靠 aspect-ratio 锁住比例，靠最小高度兜住空白。少一个，就容易在某个机型上崩掉一整列。
