动态加载卡片后位移的根本原因是盒模型尺寸计算不一致：box-sizing未统一、图片未设display: block或父容器高度被截断，导致重排；图片默认baseline对齐引发下移，须强制display: block或vertical-align: top。
直接说结论：动态加载卡片后出现位移，根本原因不是 JS 加载逻辑，而是盒模型尺寸计算在内容插入前后不一致——尤其当 box-sizing 未统一、图片未设 display: block 或父容器高度被意外截断时，浏览器会重新计算布局流，导致视觉“跳动”。
为什么图片加载完成瞬间卡片会突然下移？
这不是“动画”，是重排（reflow）：初始渲染时 vertical-align: baseline，底部留约 4px 空隙；等图片加载完撑开高度，基线对齐逻辑触发父容器重算行高，整列卡片集体下移。
- 必须给所有瀑布流内的图片加
display: block或vertical-align: top，这是硬性要求 - 别用
margin-bottom: -4px补丁——不同字体、字号下偏移量不同，不可靠 - 如果卡片含文字，确保
line-height有明确值，避免基线浮动放大错位
box-sizing 不统一如何放大位移感？
当卡片使用 content-box（浏览器默认），而容器或栅格系统用了 border-box，动态插入新卡片时，padding 和 border 的尺寸归属规则冲突，会导致列宽微调、卡片挤到下一列，看起来像“弹跳”或“卡位”。
- 项目入口 CSS 第一行必须写：
*, *::before, *::after { box-sizing: border-box; } - 第三方库（如 Ant Design 的
.ant-card）若覆盖了该规则，需针对性重置：.ant-card { box-sizing: border-box !important; } - 检查 DevTools 的 Computed 面板，确认每个卡片元素的
width是否包含 padding 和 border
column-count 布局中，新卡片插入为何拉扯旧列？
column-count 不是“追加”，而是全量重分栏。插入一个新卡片，浏览器会把整个容器内容重新按列切分——如果已有卡片高度不均，重分过程可能让某张卡片从第 2 列顶部“掉”到第 1 列底部，造成视觉撕裂。
- 避免在插入前手动设置
height或max-height在容器上，它会压缩列的自然伸展空间 - 用
column-width: 240px替代column-count: 3，让浏览器按最小列宽自动算列数，重分更稳定 - 插入新卡片后，可加一句
container.style.columnCount = container.style.columnCount强制触发一次重分，比等待 resize 更可控
最易被忽略的一点：break-inside: avoid 在 Safari 16.4 之前和部分安卓 WebView 中支持不全，一旦失效，卡片会被劈成两半跨列，后续所有卡片定位基准全乱——所以生产环境必须加 page-break-inside: avoid 双保险，不能只信一个声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
