flex布局无法实现真正的pinterest瀑布流，仅能通过flex-wrap+等宽子项模拟视觉近似的多栏效果；其本质是按行填满而非最矮列优先，导致高度差异大时底部参差、无法响应图片加载；推荐column-count作为更稳妥的原生替代方案。
Flex 布局本身不能真正实现 Pinterest 风格的瀑布流（即“最短列优先”填充），但可以快速做出视觉近似的初级分栏效果——适合内容高度差异不大、对布局精度要求不高的 H5 场景。
用 flex-wrap + 等宽子项模拟两栏/多栏
核心思路是让容器按行换行，子项宽度固定（如 48%），留出间隙，靠视觉错觉营造“分栏感”：
- 父容器设
display: flex; flex-wrap: wrap;，禁用justify-content: space-between或space-around（避免首尾间距干扰） - 每个卡片设
width: calc(50% - 8px); margin: 0 4px 12px;（两栏）；三栏则用calc(33.333% - 8px) - 确保所有卡片
box-sizing: border-box，避免 padding/border 撑破宽度 - 高度用
min-height或内容自然撑开，避免高度为 0 导致换行异常
为什么这不是真瀑布流？
Flex 的换行逻辑是“按行填满”，不是“找最矮列”：
- 第 1、2 个 item 进第 1 行；第 3、4 个进第 2 行……即使第 1 列已很高，第 5 个也不会跳上去补空
- 当卡片高度差异大时，底部会出现明显参差，列底边无法对齐
- 无法响应图片加载完成后的高度变化——加载前高度为 0，会导致后续 item 全挤在“假矮列”里
能接受的优化点
若只需轻量、静态、加载快的效果，可配合少量 JS 提升体验：
- 给图片加
onload监听，触发container.offsetHeight强制重排（小范围可用） - 窗口 resize 时，用
setTimeout防抖，重新设置子项 width（如从 50% 切到 100%） - 服务端渲染（SSR）页面首次加载时，这是唯一无需 JS 就能立刻显示分栏的方案
更稳妥的替代建议
如果项目中已有图片异步加载或需支持无限滚动，推荐直接用 column-count：
- CSS 原生支持，无 JS 依赖，回流少，兼容性好
-
.container { column-count: 2; column-gap: 12px; }即可启用 - 注意：内容按文档顺序“从上到下、从左到右”填，不是按高度排序，但对 H5 活动页足够实用
