column-count 无法在 Bootstrap .row 上生效，因其 display: flex 与 column-count 的块级流要求冲突；必须用 Masonry + imagesLoaded 实现可靠瀑布流。
column-count 能凑合出视觉瀑布流，但真要行为一致、响应式可靠、图片不跳闪，必须用 Masonry + imagesLoaded。
为什么直接在 .row 上加 column-count 会失效
Bootstrap 的 .row 默认是 display: flex，而 column-count 要求纯块级流容器。两者机制冲突，结果不是报错，而是静默忽略——你写了 column-count: 3，浏览器照旧单列堆叠。
常见错误现象：
-
.col-md-4子项被拉伸或塌陷，列间出现大片空白 - 窗口缩放时列数不切换，或短暂闪成单列
- 图片加载后内容重排，“跳闪”明显
解决办法只有两个硬条件：
- 用干净容器替代
.row，比如<div class="masonry-container"> - 子项不用任何
.col-*类，改用display: block+break-inside: avoid
Masonry 初始化前必须等图片加载完
Masonry 计算位置靠的是每个子项的 offsetHeight。如果 <img> 还没加载完，高度就是 0，所有卡片会叠在顶部，控制台可能报 Cannot read property 'offsetTop' of undefined。
别信“加个 setTimeout 等 500ms”这种写法，它不可靠。
正确做法：
- 引入顺序：jQuery →
imagesLoaded→Masonry - 初始化必须包在
imagesLoaded回调里：$('.masonry').imagesLoaded(() => { $('.masonry').masonry({ itemSelector: '.item', columnWidth: '.grid-sizer', percentPosition: true }); }); - 如果用了懒加载（
data-src），得手动触发imagesLoaded或用background-image伪元素 hack
子项不能套在 .col-* 里面
Masonry 是 JS 重排布局，而 .col-* 带 flex-basis、max-width、负 margin 等样式，会和 Masonry 的列宽计算打架。哪怕只留一个 .col-md-4，也会导致卡片错位、重叠、漏排。
实操要点：
- 把
.item直接加在语义化标签上，例如<div class="item"><div class="card">...</div></div> - 列宽不要靠
.col-md-4推算，改用 CSS 控制：width: calc(33.333% - 1rem)（三列 + 间隙） - 推荐用
.grid-sizer：加一个隐藏<div class="grid-sizer"></div>，给它设和目标列宽一致的宽度（如width: 33.333%），再传给 Masonry 的columnWidth参数
响应式列数切换必须手动触发布局
CSS 媒体查询改了 column-count 或子项宽度，Masonry 不会自动感知。窗口缩放时，列数卡住不动，或者最后一行卡片被挤变形。
必须监听 resize 并手动调用：
$(window).on('resize', function() {
$('.masonry').masonry('layout');
});更稳妥的做法是结合 debounce 防抖，避免频繁重排；另外，移动端 Safari 对 break-inside: avoid 支持不稳定，iOS 15 及更早版本建议降级为 break-inside: avoid-column。
真正麻烦的从来不是写几行 CSS 或引一个 JS 插件，而是图片加载时机、DOM 结构干扰、响应式钩子遗漏——这三处漏掉任何一环，瀑布流就只剩“流”，没有“布”。
