不能用 css multi-column 实现带重排动画的瀑布流，因其列分配为一次性渲染，不支持位置过渡动画；css grid 模拟存在视觉错乱与 dom 顺序问题；framer motion 的 layout 才是可靠解法。
用 CSS Multi-column 实现带重排动画的瀑布流？别试了
Multi-column 布局（column-count + break-inside: avoid）能实现真正按列高最小化填充的瀑布流，但它**不支持任何布局重排动画**。浏览器对多列容器的渲染是“一次性分列”，DOM 插入或尺寸变化后，列内容会整体重流，但没有中间帧——你无法用 transition 或 @keyframes 控制卡片如何滑入某列。
常见错误现象：
给卡片加 transition: all 0.3s，结果只有 opacity 或 transform 动画生效，位置跳变仍是瞬时的；
监听 resize 后强制 reflow，但无法触发连续动画帧。
- 根本原因：列分配逻辑由浏览器排版引擎内部完成，不暴露 layout 变更事件，也不映射到可动画的 CSS 属性
- 兼容性再好也没用：Safari、Chrome、Firefox 全部不支持对
column-count或列内元素位置做过渡 - 如果必须用纯 CSS 瀑布流，动画只能退而求其次——只做卡片入场/退出的 fade/scale，别碰位置
用 CSS Grid 模拟瀑布流并加动画？小心 dense 的陷阱
grid-auto-flow: dense 配合 grid-template-columns 能制造视觉瀑布效果，但它不是真瀑布流，而是一种“填空式布局”。它的重排动画可以做，但行为不可控。
示例代码：
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
grid-auto-flow: dense;
gap: 16px;
}
.grid-item {
transition: transform 0.4s cubic-bezier(0.17, 0.67, 0.83, 0.33);
}
- 当新增一项时，Grid 会重新计算所有项的位置，
transform过渡能生效，但动画路径可能诡异——比如一个卡片从第 1 行第 3 列直接“闪”到第 2 行第 1 列，中间无轨迹 -
grid-auto-flow: dense会让短卡片“插队”抢占前面空位，导致 DOM 顺序和视觉顺序错乱，影响可访问性和 SEO - 响应式列数变化（如从 3 列切到 2 列）时，整个网格重排，所有卡片同时移动，视觉混乱
Framer Motion 的 layout 机制才是可靠解法
Framer Motion 的 layout prop 不依赖 CSS 布局模型，而是用 FLIP 技术捕获元素前后位置，用 transform: translate3d() 平滑插值。它对瀑布流重排动画的支持是目前最稳定、最符合直觉的。
关键点：
- 必须用
<motion.div layout></motion.div>包裹每个瀑布流项，且容器需有明确宽度（否则 FLIP 测量失效） - 新增/删除项时，Motion 自动对比 layoutId 或 DOM 顺序，生成平滑位移动画，不受列高逻辑干扰
- 配合
useIsomorphicLayoutEffect和layoutDependency，可让动画响应列数变化（例如屏幕缩小时列数减少），而不是粗暴重排 - 性能安全：全程只操作
transform和opacity，不触发重排（reflow）
注意：它不解决“如何分配到最短列”这个核心问题——你仍需 JS 计算每列当前高度，并把新项插入对应列的 DOM 末尾，Motion 只负责把插入动作动画化。
真实项目里最容易被忽略的细节
瀑布流重排动画不是加个 transition 就完事。真正卡住进度的往往是这些隐性约束：
- Multi-column 下卡片若含
position: absolute或display: flex子容器，会破坏列内文档流，导致 break-inside 失效、内容截断 - CSS Grid 方案中，
minmax(250px, 1fr)的1fr在列数动态变化时不会重分配已渲染项，旧项位置冻结，新项才参与新布局 - Framer Motion 的
layout在 SSR 场景下首次 hydration 可能跳过动画，需用initial={false}或服务端禁用 layout - 所有方案都要求卡片高度为“确定值”或“可测量值”；含
height: auto且内容异步加载的卡片，会导致列高误判，动画起点错位
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
