column布局应用

最新推荐文章于 2024-11-02 21:02:04 发布

hx_chan

最新推荐文章于 2024-11-02 21:02:04 发布

阅读量642

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： column布局瀑布流

本文链接：https://blog.youkuaiyun.com/ppx2017/article/details/81505483

css 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了在小程序项目中如何利用Column布局快速实现瀑布流效果。通过设置子元素的break-inside属性防止内容被截断，并提供了相关CSS属性的参考资料链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近一个小程序项目中，有个页面设计使用了瀑布流，实现的方式有很多种，但最快捷简单的应该是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，作用是防止子元素被截断，给一个没有设置的效果：