最简瀑布流用 css column-count 实现，但需确保图片有明确高度、设 break-inside: avoid 防断行；懒加载需触发重排；intersectionobserver 监听占位元素须防重复；js 定位控制力强但性能差；column-count 不支持 transition，响应式切换需 js 配合 class。
用 CSS column-count 实现最简瀑布流，但图片会错位
纯 CSS 瀑布流最省事的方案就是 column-count，但它对图片高度不敏感——如果所有 img 没设固定高度或没触发加载完成，浏览器会按 0 高度排版，导致图片堆叠、错行。
必须确保每张图有明确的高度参考，否则列内顺序全乱。常见做法是给容器加 column-fill: balance（默认值，不用显式写），同时为 img 设置 break-inside: avoid 防止被断开：
article {
column-count: 3;
column-gap: 1rem;
}
article img {
width: 100%;
display: block;
break-inside: avoid;
}
注意：如果图是懒加载，得等 load 事件触发后强制重排（document.documentElement.style.columnCount = '3' 或触发 reflow），否则首屏仍错位。
IntersectionObserver + 动态插入适合长列表，但要防重复监听
滚动加载新图时，用 IntersectionObserver 监听底部占位元素最稳妥，但容易因 DOM 复用或多次绑定造成同一元素被监听多次，引发重复请求。
实操要点：
- 每次创建 observer 前先调用
unobserve清掉旧目标，或复用同一个实例 - 占位元素必须在 DOM 中唯一且不被 Vue/React 等框架复用（比如加
data-placeholder="bottom"并查唯一） - observer 的
rootMargin设成'200px'提前触发，避免滚动过快时白屏
示例中别直接监听 window，它不支持 rootMargin；必须传 { root: null } 表示以视口为根。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
JS 计算列高手动定位，性能差但控制力最强
当需要精确控制每张图位置（比如带标题、悬停动效、或要兼容 IE），就得用 JS 维护每列当前总高度，把新图塞进最短列。但这意味着每次插入都要遍历列高数组、重排 DOM，卡顿明显。
优化关键点：
- 缓存列容器的
offsetHeight，别每次用getBoundingClientRect() - 批量插入时，先算好全部图片归属列，再一次性 append，减少 layout thrashing
- 避免在
scroll里实时计算——改用requestIdleCallback或节流到 60ms 以上
典型错误是把 appendChild 放在循环里，每张图都触发一次重排，100 张图就重排 100 次。
响应式切换列数时，CSS transition 不生效
column-count 是离散属性（只能是整数），无法用 CSS transition 过渡。想实现列数渐变效果，得靠 JS 控制 class 切换 + 配合 opacity 或 transform 动画遮掩重排闪烁。
更实际的做法是：只在 resize 后延迟 50ms 再更新列数，并加 will-change: column-count 提示浏览器优化渲染。但注意 Safari 对该属性支持不稳定，建议降级为直接切换 class：
.cols-2 { column-count: 2; }
.cols-3 { column-count: 3; }
@media (min-width: 768px) {
article { column-count: 3; }
}
真正难的是列数变化时图片顺序重排——浏览器不会保持原顺序，而是按新列宽重新折行。如果业务要求“视觉顺序不变”，只能弃用 column-count，改用 JS 定位方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
