column-count 是最轻量但易翻车的瀑布流方案；视觉近似可用 CSS 多列，行为一致必须用 JS；row+col 非瀑布流，因 Flex 行布局强制等高；多列需独立容器、避免 .col 类、设 break-inside: avoid、处理图片加载与 iOS 兼容性；Masonry/Isotope 需图片加载完成后再初始化。
column-count 是最轻量、也最容易翻车的方案；真要“类似瀑布流”，得先分清你到底要视觉近似，还是行为一致——前者用 css 多列就能凑合，后者必须上 js。
为什么 row + col 永远不是瀑布流
Bootstrap 的 .row 默认是 Flex 容器，所有 .col 按行切片，高度由该行最高项决定。哪怕你写 row-cols-3，它也只是把每行塞 3 个等高盒子，不是按列“砌砖”。常见现象：中间卡片很高，左右留大片空白；或者小卡片被拉伸变形。
- 别指望
row-cols-*类能实现真正的高度错落 -
display: flex; flex-wrap: wrap配固定宽 +min-height只能模拟，且响应式换列时容易错位 - 只要用了
.col-md-4这类类名，就别初始化 Masonry 或 Isotope —— 它们会和 Flex 布局打架
column-count 要生效，容器必须“干净”
直接给 .row 加 column-count: 3，基本无效。因为 .col 自带 flex-basis、margin、甚至 float（v3），全都会破坏多列所需的纯块级流。
- 用独立容器，比如
<div class="masonry-container">，不套.row - 子项用普通
<div>，删掉所有.col-*类 - 必须设
break-inside: avoid，否则卡片可能被劈成两半（尤其含标题+图片时） -
column-gap才管用，gap-4这类 Bootstrap 类对多列无效
图片加载导致错位？这不是 bug，是必然
浏览器按初始高度（比如 <img> 没加载完时是 0）计算列高，图片加载后突然撑开，触发重排——看起来像“跳闪”或跨列错位。
- 给
<img>加 HTMLwidth和height属性（不是 CSS），预留空间 - 或统一用
aspect-ratio: 16/9+object-fit: cover控制缩放 - 避免用
background-image，它不参与break-inside计算 - iOS Safari 对
break-inside: avoid支持不稳定，可降级为break-inside: avoid-column
Masonry / Isotope 初始化前，图片必须加载完
没等图片加载就调 masonry()，JS 读到的高度全是 0，结果就是卡片堆叠、定位错乱、offsetTop 报错。
- 必须引入
imagesLoaded，且初始化必须包在它的回调里 - 子项不能嵌套在
.col-*内；宽度改用 CSS 控制，比如width: calc(33.333% - 1rem) - 响应式切换列数时，不能只改 CSS，必须手动调
masonry.layout() -
columnWidth推荐用".grid-sizer"，再加个隐藏元素设对应宽度，比传数值更稳
真正麻烦的从来不是写几行 CSS 或引一个 JS 库，而是判断当前项目能不能接受「视觉近似」——如果内容高度差异不大、用户滚动不快、且兼容性要求不高，column-count 就够用；一旦有懒加载、动态折叠、或需要点击后精准定位，Masonry 或 Isotope 就绕不开。
