column-count 瀑布流翻车记

在使用 CSS 实现商品列表的瀑布流效果时，我最初选择了 column-count 属性。当时觉得这个方法简直完美------不需要动态计算元素高度，也不用手动插入数据，只需一个属性就能轻松搞定瀑布流布局。然而，实际使用后却发现，这个属性并非万能，存在一些坑点需要解决。下面就来分享我在使用 column-count 时遇到的两个主要问题及其解决方案。

1. 元素被意外拆分的问题

column-count 实现的瀑布流，其原理是将内容按列顺序填充：先填满第一列，再继续填充第二列。这就导致一个问题------如果某个元素高度较小（如下图标记①处），它可能会被直接"挤"到第二列（标记②处），破坏了预期的布局完整性。

解决方案：

在子元素上添加 break-inside: avoid 属性。这个属性可以防止元素在分栏时被拆分，确保每个商品项保持完整。

break-inside 的可选值：

avoid：避免元素内部发生分页或分栏

auto：默认允许分页

avoid-page：避免页面分隔，但允许分栏

avoid-column：避免分栏，但允许页面分隔

html 复制代码

<!-- 商品列表 -->
<view class="goods-list">
    <!-- 模拟数据，循环10个商品 -->
    <view wx:for="{{10}}" class="goods-item">商品信息</view>
</view>

css 复制代码

.goods-list {
    column-count: 2; /* 设置列数 */
    column-gap: 15px; /* 列间距 */
}
.goods-item {
   break-inside: avoid; /* 防止元素被拆分 */
}

2. iOS 设备上出现大片空白的问题

在使用 column-count 时，我还发现一个兼容性问题：在两列高度完全一致的情况下，安卓设备显示正常，但 iOS 设备底部却会出现一大片空白区域（如图所示）。这是因为 iOS 和安卓的浏览器渲染机制存在差异。

解决方案：

在商品列表的容器上添加一个伪元素（::after），通过设置一个透明的占位高度来强制调整布局，消除空白。

html 复制代码

<!-- 商品列表 -->
<view class="goods-list">
    <!-- 模拟数据，循环10个商品 -->
    <view wx:for="{{10}}" class="goods-item">商品信息</view>
</view>

css 复制代码

.goods-list {
    column-count: 2; /* 设置列数 */
    column-gap: 15px; /* 列间距 */
}
.goods-item {
   break-inside: avoid; /* 防止元素被拆分 */
}
.goods-list::after {
  content: '';
  display: block;
  width: 100%;
  height: 3px; /* 微小高度，修复空白 */
  background: transparent;
}

总结

column-count 确实是一个简单高效的瀑布流实现方式，但它并非没有缺点。元素拆分和 iOS 兼容性问题都需要额外的处理。希望这篇文章能帮到遇到类似问题的开发者，让大家少走点弯路。如果有其他更好的方案，欢迎在评论区交流！