column-count错位主因是按文本流切分、不感知子元素高度，图片加载前高度为0致强行截断；仅适用于纯文字或等高卡片，图片瀑布流必须用JS方案（如Masonry）配合懒加载监听与宽高占位。
为什么直接用 CSS column-count 做瀑布流会错位？
因为 column-count 是按文本流切列，图片高度不一致时，img 元素会被硬生生截断到不同列，导致视觉错乱、加载顺序异常，懒加载监听也完全失效。它只适合纯文字或等高卡片，别在图片瀑布流里用。
真正靠谱的方案是 JS 控制容器分栏 + 懒加载监听结合。主流做法有两种：固定列数绝对定位（Masonry）或动态插入到最短列（JS 实现的“伪 Masonry”）。
- 推荐用
Masonry库（v4+），它已原生支持IntersectionObserver懒加载，且能响应窗口 resize 和图片加载完成后的重排 - 不用框架时，可用
getBoundingClientRect()+IntersectionObserver手动监听进入视口的img[data-src]，再赋值src并触发重排 - 注意：图片未设宽高占位时，加载后会引发布局抖动，必须提前写死
width和aspect-ratio或用padding-top占位
IntersectionObserver 监听图片进入视口却没触发？
常见原因是图片父容器有 overflow: hidden 或 transform（比如 scale(1)），这会让 IntersectionObserver 的根容器计算失效，默认以 viewport 为根，但被裁剪后就无法正确判断相交。
- 解决方法：显式传入
{ root: null, rootMargin: '50px' }，确保以 viewport 为根，并加 50px 提前加载缓冲 - 如果瀑布流容器本身带滚动（比如
overflow-y: auto），则需指定root: document.querySelector('.masonry-container') - 务必检查图片是否已渲染进 DOM —— 动态插入的
img要等appendChild完成后再交给observer.observe() - 旧版浏览器不支持？补
intersection-observerpolyfill，但注意它不支持rootMargin百分比值，只认 px
用 Masonry + imagesLoaded 防止重排错乱
Masonry 默认只监听元素插入，不等图片加载完就计算高度，结果列高不准、图片堆叠。必须等所有 img 的 load 事件或用 imagesLoaded 插件兜底。
立即学习“前端免费学习笔记（深入）”；
- 初始化前先等容器内图片加载：
imagesLoaded(container).on('always', () => { msnry = new Masonry(container, { itemSelector: '.grid-item' }); }); - 如果图片是懒加载的，要在
img.src赋值后，手动调用msnry.appended(newEls)，再执行imagesLoaded(newEls).on('always', () => msnry.layout()) - 避免重复绑定：每次新增一批图，不要重新 new Masonry，只用
appended+layout - 注意
imagesLoaded不监听error，失败图片要自己 catch 并 fallback 占位图，否则留白卡住布局
移动端滚动卡顿、图片闪烁怎么办？
瀑布流高频重排 + 图片解码是主因。Chrome on Android 尤其明显，layout() 调用太勤、img 解码未异步化都会掉帧。
- 节流
resize重排：用requestAnimationFrame包一层，避免连续触发 - 图片加
decoding="async"属性，让浏览器后台解码：<img decoding="async" alt="html怎么实现图片瀑布流加载_html图片瀑布流滚动懒加载实现【推荐】" > - 慎用
will-change: transform强制 GPU 加速 —— 对图片多的列表反而增加内存开销，得不偿失 - 真卡顿时，可降级：小屏设备（
max-width: 768px）改用单列 + 普通懒加载，放弃瀑布效果保流畅
最易被忽略的是图片尺寸未声明 —— 没有 width/height 或 aspect-ratio，导致加载后重绘+重排双触发，懒加载越快，抖动越狠。
