无通用最优解：静态场景用column-count最轻量；Chrome/Edge新版本可用grid-template-rows:masonry；动态内容必选Masonry.js；Flex仅作兜底，无法实现真实瀑布流语义。
商品瀑布流没有“通用最优解”，选哪种方案取决于你是否要支持图片异步加载、是否需拖拽排序、是否要求 Safari/Firefox 全兼容——不满足这些，column-count + break-inside: avoid 就够用；一旦有动态内容或交互需求，必须上 JS 方案。
用 column-count 实现静态商品列表（最轻量）
这是目前兼容性最好、零 JS、开发最快的方式，适合后台管理页、CMS 静态商品页、或图片尺寸已知且不变的场景。
- 容器必须设
column-count（如3）或column-width（如300px），两者只设其一；设两个时浏览器以column-width为优先参考 -
break-inside: avoid必须加在**直系子元素**上，如果.item外包了一层<div class="wrapper">，那就要写在.wrapper上，否则截断失效 - Safari 对
break-inside支持弱，务必补-webkit-column-break-inside: avoid - 容器不能设
height: 0或min-height: 0，否则列高塌陷，卡片重叠 - 子项内含绝对定位元素（如价格 badge、收藏图标）时，需给
.item加position: relative
示例 CSS：
.masonry {
column-count: 3;
column-gap: 1rem;
}
.masonry > * {
break-inside: avoid;
-webkit-column-break-inside: avoid;
margin-bottom: 1rem;
}
.item {
position: relative;
}用 grid-template-rows: masonry 做真正响应式（仅 Chrome/Edge 116+）
这是目前唯一原生支持“按内容高度自动填短列”的 CSS 方案，但它是实验性特性，Safari 和 Firefox 完全不识别，上线前必须确认目标用户浏览器分布。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须配合
display: grid使用，且不能和flex或float混用 -
grid-template-rows: masonry本身不接受值，写成grid-template-rows: masonry(200px)是错的，会直接失效 - 若同时设了
grid-auto-rows，它会被忽略；列宽仍需靠grid-template-columns控制 - 无法通过 CSS 获取当前列数或某列高度，所以 hover 提升
z-index、点击定位到具体列等交互仍可能出错
基础写法：
.masonry {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
grid-template-rows: masonry;
}用 Masonry.js 处理图片加载与动态插入（最稳妥的 JS 方案）
只要商品图是懒加载、服务端渲染后 JS 补数据、或支持用户拖拽排序，就必须用 Masonry.js（v4.2.2+）这类库，它能监听图片加载完成并重排，比手写逻辑稳定得多。
- 初始化前必须等 DOM 就绪：
document.addEventListener('DOMContentLoaded', ...)，不能放在<head>里立即执行 - 所有
<img>必须带width和height属性（哪怕只是占位值），否则getBoundingClientRect()返回0，布局错乱 - 动态添加新商品时，调用
layout.appended( newElements )，不要用layout.reloadItems()——后者会强制重排全部项，性能差且闪屏 - 若父容器有
transform或filter（比如加了阴影或缩放动画），Masonry 默认的position: relative会导致定位偏移，需手动给容器加contain: layout style paint或改用position: static并靠 JS 计算 offset -
itemSelector必须精确匹配子项，写成'.item *'或'.item > div'都会失败
为什么 Flexbox 不适合做商品瀑布流
网上有些教程用 display: flex + flex-wrap: wrap 模拟多列，再靠 JS 手动计算每列高度来分配 item——这看似灵活，实则问题密集：
- Flex 容器无法让单个子项“跨行”，只能靠固定高度或 JS 动态设
margin-top模拟，结果是滚动时出现明显空白间隙 - 窗口 resize 时，JS 重排逻辑极易漏掉某些 item，尤其当商品含图片、字体加载延迟时
- Flex 的
order属性无法按运行时高度重排序，所谓“填最短列”只是视觉近似，不是真实瀑布流语义 - 没有内置图片加载监听，必须额外集成
imagesLoaded，复杂度不比 Masonry 低
真正需要“填最短列”语义的场景，Flex 只能当备用兜底，不能作为主方案。
最后提醒一句：所有方案都绕不开图片宽高。如果你的商品图来自 CMS 或用户上传，且没预设尺寸，column-count 会因高度未定而错位，Masonry 会因 getBoundingClientRect() 返回 0 而崩掉——要么服务端返回宽高字段，要么前端用 data-aspect-ratio + JS 补算，这个环节漏掉，后面全白搭。
