纯Bootstrap的row+col无法实现真正瀑布流，因其flex布局强制等高导致错位；应使用column-count（轻量CSS）或Masonry（推荐JS方案），并注意清除栅格类、图片加载等待及响应式重排。
纯 Bootstrap 的 row + col 无法实现真正瀑布流，它只会强制等高、留白错位；要视觉连续、高度自适应的卡片排列，必须用 column-count（轻量 CSS 方案）或 Masonry 类 JS 库（推荐）。
为什么 row + col 不是瀑布流
Bootstrap 的 row 是 flex 容器，col 是 flex 项目，默认会被拉平到同一行高度。哪怕你写 col-md-4，只要某张图高、某张图矮，就会出现“楼梯状”错位或底部大片空白——这不是 bug，是设计使然。
常见错误现象包括：
-
Uncaught TypeError: Cannot read property 'offsetTop' of undefined（混用 Masonry 时因残留col类干扰计算） - 卡片堆叠、列间高度差明显
- 小屏下仍强行并排导致水平滚动（误用
card-deck或漏掉row）
用 column-count 实现轻量瀑布流（无 JS）
这是最轻量、兼容性够用的方案（Chrome 50+、Firefox、Safari 14.1+、Edge 79+），但需堵住几个渲染漏洞：
- 容器必须设
column-count: 3和column-gap: 1rem（别用 Bootstrap 的g-*类，它对多列无效） - 每个卡片（如
.card或article）必须加break-inside: avoid，否则内容可能被硬切到两列 -
img标签务必设width: 100%和height: auto，否则在列布局下易溢出或比例失真 - 响应式切换列数必须用媒体查询：
@media (max-width: 768px) { .card-container { column-count: 1; } }，不能靠col-sm-6模拟 - iOS Safari 15 及更早版本对
break-inside支持不稳定，可降级为break-inside: avoid-column并加max-width: 100%双保险
用 Masonry 实现真实瀑布流（推荐）
Masonry（或 vanilla-masonry）是当前最稳路径，但必须彻底剥离 Bootstrap 栅格类，否则 JS 计算位置时会因 flex-basis、margin、float 干扰而重叠错位：
- 容器只保留语义化结构，比如
<div class="masonry">，删掉所有 <code>row和col-*类 - 子项用纯标签（如
<article></article>或<div class="item">），宽度由 CSS 控制：<code>width: calc(33.333% - 1rem) -
imagesLoaded不是可选插件——必须等图片加载完成再初始化 Masonry，否则读到未渲染的offsetHeight会导致高度计算错误 - 响应式切换列数时，必须调用
masonry.layout()重排，不能只改 CSS
容易被忽略的关键点
很多人卡在“看起来像瀑布流”，但实际是伪实现：比如用 display: flex; flex-wrap: wrap + 固定宽 + min-height 模拟，它对文字为主的内容尚可，但图片加载异步、尺寸不一、懒加载介入后极易错位；真正的瀑布流核心不是“多列”，而是“按列流顺序填入，且每项完整保留在一列内”，这需要 break-inside 或 JS 精确测量，缺一不可。
