纯 bootstrap 的 row + col 无法实现真正响应式图片瀑布流，必须用 column-count（轻量无 js）或 masonry 类库（精准可控）；前者需设 column-count、break-inside: avoid 和 img 自适应，后者须剥离栅格类并配合 imagesloaded 确保图片加载后布局。
纯 Bootstrap 的 row + col 无法实现真正响应式图片瀑布流——它会强制等高、留白错位，不是 bug，是设计逻辑决定的。要视觉连续、高度自适应的瀑布效果，必须用 column-count（轻量无 JS）或 Masonry 类库（精准可控），二者选其一，没有中间路线。
为什么 row + col 不能当瀑布流用
Bootstrap 的 row 是 flex 容器，col 是 flex 项目，默认拉平高度。哪怕你写 col-md-4，只要某张图高、某张图矮，就会出现“楼梯状”错位或底部大片空白。这不是渲染异常，而是 flex 布局的必然行为。
- 常见错误现象：卡片堆叠成一列、列间高度差明显、底部留白严重
-
row-cols-*类只是控制每行显示数量，并强制等高，本质仍是砖墙布局，不是瀑布流 - 别指望
min-height或h-100救场——它们只解决对齐，不解决高度错位
用 column-count 实现轻量瀑布流（无 JS）
这是最轻量、兼容性够用的方案（Chrome 50+、Firefox、Safari 14.1+、Edge 79+），但必须堵住几个关键渲染漏洞，否则图片会被切开、文字断行错乱。
- 容器加
column-count: 3和column-gap: 1rem；别用 Bootstrap 的g-*类，它对多列无效 - 每个卡片（如
<div class="card">）必须设 <code>break-inside: avoid，防止图文被硬切到两列 -
<img>标签必须设width: 100%和height: auto，否则在列布局下易溢出或比例失真 - 响应式切换列数必须用媒体查询：
@media (max-width: 768px) { .container { column-count: 1; } } - iOS Safari 15 及更早版本对
break-inside支持不稳定，可降级为break-inside: avoid-column并加max-width: 100%双保险 - 容器只保留语义化结构，比如
<div class="masonry">，删掉所有 <code>row和col-*类 - 子项用纯标签（如
<div class="item">），宽度由 CSS 控制：<code>width: calc(33.333% - 1rem) -
imagesLoaded不是可选插件——必须等图片加载完成再初始化 Masonry，否则读到的 DOM 高度为 0，布局全崩 - 响应式切换列数时，不能只改 CSS，必须调用
masonry.layout()重排 - 常见错误现象：
Uncaught TypeError: Cannot read property 'offsetTop' of undefined，基本是子项还挂着col-*类或图片未加载完就初始化 -
<meta name="viewport" content="width=device-width, initial-scale=1">缺失会导致所有断点失效 - 图片未加
img-fluid或未设width: 100%，在列布局或 Masonry 下极易溢出、拉伸变形 - 动态生成卡片时用
innerHTML +=拼接，XSS 风险高、class 写错不报错、无法按条件开关样式 - 测试时只看 Chrome，但 Firefox 对
column-count渲染最稳，Chrome 有时因图片异步加载导致初始错位
用 Masonry 实现真实瀑布流（推荐）
Masonry（或 Isotope）是当前最稳路径，但必须彻底剥离 Bootstrap 栅格类，否则 JS 计算位置时会因 flex-basis、margin、float 干扰而重叠错位。
容易被忽略的细节
真正落地时，最容易翻车的不是代码怎么写，而是这些隐性依赖：
