必须用 javascript + absolute 定位实现 pinterest 布局，因 css column-count 无法控制顺序、响应式重排和图片加载错位；列数需根据容器净宽动态计算，列高数组初始化为全 0，图片加载完成前不可读高度，定位时 left 由列索引和间距决定，top 取当前列累积高度，更新时累加元素高度与真实 margin，容器高度设为列高最大值，resizeobserver 监听尺寸变化，新增项仅局部重排，图片加载后需触发后续卡片位置重算。
纯 CSS 的 column-count 方案无法控制元素顺序、不支持响应式重排、图片加载后高度变化会错位——如果你需要精确控制每个卡片的位置（比如 Pinterest 风格）、支持懒加载、动态插入新项或适配窗口缩放，就必须用 JavaScript + position: absolute 动态计算。
如何初始化列高数组并确定列数
列数不能写死，必须根据容器宽度和单个卡片的基准宽度实时计算。关键不是“屏幕宽度除以卡片宽”，而是要先获取容器实际可用宽度（减去滚动条、padding），再用 Math.floor 向下取整，避免最后一列过窄。
- 用
getBoundingClientRect().width获取容器净宽，比offsetWidth更可靠（避开 border/padding 干扰） - 列数 =
Math.max(2, Math.floor(containerWidth / itemBaseWidth))，Math.max防止小屏下变成 1 列甚至 0 列 - 列高数组初始为
Array(columnCount).fill(0)，每个值代表该列当前累积高度（含 margin）
为什么遍历元素时必须等图片加载完成再计算高度
直接读 offsetHeight 会拿到 0 或错误值，因为图片还没解码渲染。常见错误是只监听 load 事件，但忽略了 error 和缓存命中场景（complete 属性为 true）。
- 对每个
img元素，先检查img.complete：若为true，立即执行布局逻辑 - 否则监听
img.addEventListener('load', handler)和'error'，失败时 fallback 到默认高度（如 200px） - 不要在循环里直接调用
getBoundingClientRect()—— 它会强制同步回流，性能爆炸；应先收集所有图片，统一用Promise.all等待全部就绪
定位逻辑中 left/top 怎么算才不偏移
left 值由列索引 ×（卡片宽度 + 列间距）决定，但很多人漏掉列间距的累加；top 是该列当前高度，不是最小值本身——它必须包含上一个元素的 margin-bottom。
-
left = columnIndex * (itemWidth + gap)，其中gap是列间空隙（非卡片内边距） -
top = columns[columnIndex]，即该列当前累计高度，不是Math.min(columns)的返回值 - 更新列高时：
columns[columnIndex] += itemHeight + marginBottom，这个marginBottom必须从 computed style 中读取（不能硬编码），否则响应式 margin 变化会导致错位 - 容器
height必须设为Math.max(...columns)，否则底部内容被截断
resize 和新增数据时怎么避免重复计算和抖动
窗口缩放或插入新卡片都会触发重排，但频繁调用布局函数会导致卡顿。不能只靠 debounce，还要做状态隔离。
- 用
ResizeObserver替代window.addEventListener('resize')，它只在容器尺寸真实变化时触发，且不监听子元素 - 每次重排前清空旧的
style.left/style.top，否则新旧值叠加导致位置漂移 - 新增卡片时，不要重新计算全部元素——只对新增项执行“找最短列 → 定位 → 更新列高”三步即可
- 避免在布局函数里反复查询 DOM，把
itemWidth、gap、container等作为闭包变量缓存
最易被忽略的是：图片加载完成后的高度变化会撑开已有列，但旧卡片的 top 值不会自动更新。这意味着你必须在每张图加载完后，触发一次“从该列向下所有卡片”的位置重算——除非你一开始就用 flex/grid 做底层容器，否则绝对定位方案天然不支持自适应回流。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
