column-count 无法实现真正的瀑布流无限加载，因其按dom顺序分栏导致重排跳图、懒加载失效，且不暴露列高使intersectionobserver无法精准加载；js方案需维护列高数组并动态插入至最短列。
纯 CSS 的 column-count 做不了真正的瀑布流无限加载——它会重排、跳图、懒加载失效，动态场景下必须用 JS 控制列高 + IntersectionObserver 触发加载。
为什么 column-count 在滚动加载中必然翻车
CSS 多栏是按 DOM 顺序切片的，新元素 append 到末尾时，浏览器会重新分栏，导致已渲染图片位置突变、高度塌陷、甚至重复加载。更致命的是：column-count 完全不暴露每列实际高度，IntersectionObserver 拿不到“哪列最短”，也就没法把新图插到正确位置。
- 常见错误现象：
scrollHeight突然变大，用户正看的图片瞬间上移或消失 - 图片未加载完时列高为 0，插入后回流严重，视口内图片反复进出触发多次懒加载
-
break-inside: avoid在 Safari 上基本失效，column-gap在不同浏览器渲染偏移 1px - DOM 顺序 ≠ 视觉顺序，影响 SEO、屏幕阅读器，
:nth-child选中错乱
JS 瀑布流核心：维护列高数组并找最小列
本质就两步：记录每列当前总高度，每次插入新图时找最小值列，append() 到它内部。关键不是“怎么放”，而是“怎么持续维护高度”。
- 列容器必须是独立
<div class="col"></div>，不能靠position: absolute模拟——否则offsetHeight取不到真实值 - 图片原始尺寸未知时，不能直接用
img.height；得先用new Image()预加载，拿到naturalWidth/naturalHeight，再按目标列宽等比缩放算出渲染高度 - 滚动加载新图时，
minHeight数组不能重置；要在已有列高基础上继续找最小列，否则新图全堆第一列 - 示例逻辑片段中，
img.style.height = ${targetCol.clientWidth * ratio}px必须在onload后设置，避免回流
用 IntersectionObserver 替代 onscroll 监听加载时机
直接监听 window.onscroll 容易误判，尤其在图片懒加载、广告位插入等导致页面高度动态变化时。IntersectionObserver 更稳，且性能更好。
- 在列表末尾固定一个占位元素
<div id="loader-trigger"></div>，始终保留在 DOM 中（不销毁） - 初始化时传入
{ rootMargin: '0px 0px 200px 0px' }，提前 200px 触发，避免用户感知卡顿 - 回调中调用加载逻辑后，立即
unobserve()，等新内容插入后再重新observe()一次，防止重复触发 - 务必和服务端约定明确的结束信号，比如返回
has_more: false或is_last_page: true，不能只靠data.length === 0
插入新内容时如何避免滚动条跳动
直接 container.append(newItem) 或 innerHTML += html 会导致重排，尤其在高度不固定时，滚动条会突然“上蹿”或“下掉”。重点不是阻止重排，而是让重排不改变用户当前看到的位置。
- 加载前记录当前列表最后一项的
offsetTop（不是scrollTop） - 插入新内容后，计算新增内容总高度，再用
scrollBy(0, delta)补偿偏移量 - 更简单稳妥的做法：用
position: relative包住整个列表容器，加载时先transform: translateY(-Xpx)把容器上移，插入后再还原，视觉上无感 - 务必确保所有列表项有明确高度（哪怕用
min-height），否则浏览器无法准确预估布局变化
真正难的不是“第一次渲染”，而是“第 N 次插入后列高是否还准”——图片加载完成时机、缓存状态、CSS transition、父级 transform 都会影响 offsetHeight 读取。别信“只要写了 JS 就能自动对齐”，必须在每次插入后校验并手动修正列高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
