最简洁方案是用 CSS columns + 媒体查询：默认 .waterfall { columns: 2; }，小屏 @media (max-width: 480px) { columns: 1; }，子项加 break-inside: avoid 防截断。
在 H5 页面中实现移动端双列瀑布流到单列瀑布流的切换，核心是通过 CSS 媒体查询（@media）配合合理的布局方案（如 column-count 或 CSS Grid/Flex + JavaScript 动态控制），而不是依赖 JavaScript 计算列数。最简洁、语义清晰且兼容性好的方式是使用多列布局（columns）+ 媒体查询。
用 columns + 媒体查询直接控制列数
这是最轻量、无需 JS 的纯 CSS 方案，适合内容为块级元素（如卡片、图片项）的瀑布流场景：
- 给容器设置
columns: 2，并指定列宽或列数；子项用break-inside: avoid防止被截断 - 在小屏幕（如 max-width: 480px 或 768px）下，将
columns改为1 - 注意：该方案依赖浏览器原生多列渲染，天然支持瀑布流效果（内容自动平衡分列），但不支持“每列独立滚动”或复杂交互
示例代码：
.waterfall {
columns: 2;
column-gap: 16px;
}
.waterfall > * {
break-inside: avoid;
margin-bottom: 16px;
}
@media (max-width: 480px) {
.waterfall {
columns: 1;
}
}用 CSS Grid 实现响应式瀑布流（推荐进阶场景）
若需更强控制力（如固定高度卡片、对齐、hover 效果），可用 grid-template-columns 配合 auto-fill / minmax，再结合媒体查询降为单列：
- 默认设为
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))实现双列（在中等屏下自动占满两列） - 小屏下改用
grid-template-columns: 1fr，同时可加gap控制间距 - 注意：纯 Grid 本身不产生“瀑布流”高度错落效果，需配合
align-items: start和子项不定高；真瀑布流仍建议用columns或 JS 库（如 Masonry）
避免常见误区
以下做法容易导致失效或体验问题：
- 仅靠
width媒体查询却忽略设备像素比（dpr），应优先用max-width而非max-device-width - 未重置子项的
float、display: inline-block等旧布局遗留样式，干扰多列渲染 - 在双列时用
flex-wrap模拟瀑布流——Flex 不支持真正的列平衡，会出现顶部对齐、空白断裂等问题
需要 JS 辅助的情况（少数）
仅当业务要求严格列高平衡、动态加载、或兼容 iOS Safari 旧版本（columns 支持不全）时，才考虑 JS 方案：
- 监听
resize或使用matchMedia判断当前断点 - 根据列数重新调用瀑布流库（如
masonry-layout）或手动计算位置 - 但日常 H5 开发中，优先用纯 CSS
columns，更稳定、性能好、代码少
