Bootstrap Card列不自动等高且非瀑布流，因.row+.col-*采用Flexbox/float线性布局，按行切片；Masonry需JS接管布局，用.grid-sizer定义列宽，配合imagesLoaded确保图片加载完成后再初始化。
为什么 Bootstrap 默认的 Card 列不会自动等高，也不形成瀑布流
因为 bootstrap 的 .row + .col-* 是基于 flexbox（v4/v5）或 float（v3）的线性布局，它按行“切片”，每行高度由该行最高卡片决定，下方行从新起点开始——这导致视觉上留白多、缝隙大，根本不是瀑布流。masonry 不是 css 布局，而是 js 驱动的重排逻辑：它把所有 .item 拿出来，按列逐个“砌砖”，所以必须放弃依赖栅格的自动换行行为。
如何用 Masonry 正确包裹 Bootstrap Card
关键不是“改 Card 样式”，而是让 Masonry 接管布局控制权，同时保留 Bootstrap 的响应式类（如 .col-sm-6）仅作宽度参考，不参与实际排列：
- 把
.masonry类加在.row上，但移除所有.row的 Flex 相关样式干扰（v5 中可加style="display: block;"强制退回到块级流） - 每个 Card 容器（比如
<div class="card">外层）加.item类，且**不要嵌套在.col-*内部**；.col-*应直接加在.item上（即<div class="item col-sm-6 col-md-4"><div class="card">...</div></div>） - Masonry 初始化时必须传
columnWidth，推荐用columnWidth: ".grid-sizer"方式，再加一个隐藏的<div class="grid-sizer"></div>在.masonry内首位置，并给它设和.col-*一致的宽度（如width: 33.333%对应.col-md-4）
图片没加载完就触发 Masonry，导致卡片重叠怎么办
这是最常被忽略的坑：Masonry 计算高度时，如果 <img> 还没加载完成，会读到 0 高度，后续所有定位全错。它不会自动重排，也不会监听 load 事件。
- 必须引入
imagesLoaded插件，在 Masonry 初始化前等待图片就绪 - 正确写法是：
$('.masonry').imagesLoaded().done(function() { $('.masonry').masonry({ itemSelector: '.item', columnWidth: '.grid-sizer', percentPosition: true }); }); - 注意
percentPosition: true必须开启，否则用百分比宽度（如.col-md-4）时 Masonry 会按像素计算列宽，错位
Bootstrap 5 + Masonry 的兼容性细节
Bootstrap 5 默认启用 scroll-behavior: smooth 和部分 CSS 变量，一般不影响 Masonry，但有两个实际问题：
- 如果 Card 内用了
.card-img-top且图片无固定宽高，建议显式设img { height: auto; max-width: 100%; }，否则某些浏览器下会撑开容器导致重排失败 - 不要在
.item上用transition或animation，Masonry 的重排会与 CSS 动画冲突，出现闪动或卡顿 - 移动端若触发了双击缩放（尤其是 iOS Safari），可能破坏列宽计算，务必确保页面有
<meta name="viewport" content="width=device-width, initial-scale=1">
columnWidth 解析错误上。 
