column布局应用

最近一个小程序项目中，有个页面设计使用了瀑布流，实现的方式有很多种，但最快捷简单的应该是column布局了，废话少说，先看代码

<view class='hot-content-box'>
    <view wx:for="{{hotCollageList}}" wx:key="hci" class='hot-item-box' data-goodsid="{{item.goodsId}}" data-activityid="{{item.activityId}}" bindtap="goodsDetail">
        <image src='{{item.goodsPic}}' mode='widthFix'></image>
        <view class='goods-name'>{{item.goodsName}}</view>
        <view class="goods-num">{{item.rule.numLimit}}人团</view>
        <view class="goods-price-box">
          <view class="goods-act-price goods-line">¥{{item.actualPrice}}</view>
          <view class="goods-price-txt goods-line">拼团价</view>
          <view class="goods-org-price goods-line">¥{{item.goodsPrice}}</view>
        </view>
    </view>
</view>

效果如下：

看看css中column布局如何实现：

.hot-content-box {
  padding: 0 30rpx 30rpx;
  background: #fff;
  column-count: 2;
  column-gap: 30rpx;
}

.hot-item-box {
  padding: 20rpx;
  box-shadow: inset 0 -1px 1px 1px rgba(228, 221, 221, 0.50);
  border-radius: 8px;
  break-inside: avoid;
}

请注意子元素设置了break-inside，作用是防止子元素被截断，给一个没有设置的效果：

其他属性使用参考这里：https://blog.youkuaiyun.com/ppx2017/article/details/80498752