微信小程序瀑布流布局纯css样式

最近发先我们ui设计师很喜欢这种瀑布流设计图，在日常开发中，应该会有小伙伴需要这样的瀑布流样式布局的商品列表，今天整理出相关的代码，如有需要可自取，效果图如下，如遇问题评论留言。

wxml

    <!-- 商品列表 -->
    <view class="fourth_all_goods">
    <view class="fourth_congoods flex-b"> 
      <view class="twoshop-shop-box" wx:for="{{2}}">
        <!-- beiin轮播图 -->
        <view class="congoods conListy" wx:if="{{index==0}}">
          <swiper class="congoods_fourth_swiper"  autoplay="{{true}}" indicator-dots="true" circular="true" duration="500" indicatorActiveColor="#FF5000"  interval="3000">
          <swiper-item wx:key='index' wx:for="{{5}}">
            <image class="swiper_img" bindtap="jump" data-url="{{item.jump}}"
              src="https://b.bdstatic.com/searchbox/icms/searchbox/img/%E4%B8%8A%E9%B2%9C%E4%BA%86%E5%AE%B6%E4%B9%A1.png">
            </image>
          </swiper-item>
          
        </swiper>
        </view>
        <!--end 轮播图 -->
        <!--开始； 商品列表 -->
      <view class="congoods" wx:for="{{5}}">
        <view class="fourthshop-shop-item">
          <image class="fourthshop-shopimg" src="https://b.bdstatic.com/searchbox/icms/searchbox/img/%E4%B8%8A%E9%B2%9C%E4%BA%86%E5%AE%B6%E4%B9%A1.png"></image>
          <view class="fourthshop-shop-main">
            <view class="fourthshop-shop-mainname">
              <!-- <text>自营</text> -->
              <image src="https://b.bdstatic.com/searchbox/icms/searchbox/img/%E4%B8%8A%E9%B2%9C%E4%BA%86%E5%AE%B6%E4%B9%A1.png"></image>
              <text class="fourthshop-shopname">商品列表商品列表商品列表商品列表商品列表</text>
            </view>
            <view class="flex">
              <view class="fourthshop-shopprice flex">
                <text>￥</text>
                <view>5555</view>
              </view>
              <view class="fourthshop-shop-ccc">￥888888</view>
            </view>
            <view class="fourthshop-shop-cccf">销量：9999999</view>
          </view>
          <view class="fourthshop-shopint">
            <qdd-icon fontsize="24" class="more-icon" name="iconfenxiang1" color="#fff"></qdd-icon>
            ￥<text>1111111</text> 
          </view>
        </view>
      </view>
      <!-- 结束 商品列表 -->
        <!--  -->
      </view>
      
    </view>

  </view>

wxss

.fourth_all_goods{
  padding: 0 20rpx;
 
}

.fourthshop-shop{
  position: relative;
  flex-wrap: wrap;
}
.fourthshop-shop-item{
  width: 345rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  margin-top: 20rpx;
}
.fourthshop-shop-item:nth-child(2n){
  float: right;
}
.fourthshop-shopimg{
  width: 345rpx;
  height: 345rpx;
  border-radius: 20rpx 20rpx 0 0;
}
.fourthshop-shop-main{
  padding: 0 24rpx 38rpx 26rpx;
}
.fourthshop-shop-mainname{
  overflow: hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  font-size: 26rpx;
  font-weight: 500;
  color: #333333;
  line-height: 36rpx;
  padding-top: 20rpx;
}
.fourthshop-shop-mainname text:first-child{
  height: 30rpx;
  color: #fff;
  font-size: 20rpx;
  padding: 0 8rpx;
  margin-right: 5rpx;
  line-height: 30rpx;
  background: linear-gradient(180deg, #FF3503 0%, #FF0152 100%);
  border-radius: 5px;
}
.fourthshop-shop-mainname image,.fourthshop-shop-main image{
  width: 56rpx;
  height: 30rpx;
  position: relative;
  top: -2rpx;
  margin-right: 2rpx;
}

.fourthshop-shopname{
  font-size: 26rpx;
  font-weight: 500;
  color: #333333;
  line-height: 26rpx;
}

.fourthshop-shopint{
  width: 345rpx;
  height: 52rpx;
  line-height: 52rpx;
  background: linear-gradient(90deg, #FA3354, #FC5C45);
  border-radius: 0px 0px 20rpx 20rpx;
  font-size: 24rpx;
  text-align: center;
  color: #fff;
}
.fourthshop-shopint text{
  font-family: PingFang SC;
  font-weight: 800;
  font-size: 30rpx;
  color: #FFFFFF;
}
.fourthshop-shopprice{
  font-size: 30rpx;
  font-weight: 500;
  color: #FA3354;
  line-height: 44rpx;
  margin-top: 10rpx;
  font-family: PingFang SC;
}

.fourthshop-shopprice-icon{
  font-size: 18rpx;
}

.fourthshop-shop-ccc{
  font-size: 22rpx;
  font-weight: 500;
  color: #999999;
  line-height: 18rpx;
  margin-top: 25rpx;
  text-decoration: line-through;
  margin-left: 8rpx;
}

.fourthshop-shop-cccf{
  font-size: 22rpx;
  font-weight: 500;
  color: #999999;
  line-height: 18rpx;
  margin-top: 16rpx;
}

/* css瀑布流 */
.fourth_congoods{
  width: 710rpx;
  overflow: hidden;
  flex-wrap: wrap;
}
.twoshop-shop-box{
  width: 345rpx;
}
.congoods{
  border-radius: 20rpx;
  width: 345rpx;
  position: relative;
  margin-bottom: 20rpx;
  break-inside: avoid;
  box-sizing: border-box;
}
.conListy:first-child{
  height: 502rpx;
}
.conListy:first-child image{
  width: 345rpx;
  height: 502rpx;
  border-radius: 20rpx;
}

.congoods_fourth_swiper{
  height: 502rpx;
  border-radius: 20rpx;
  margin: 10rpx auto;
  overflow: hidden;
  position: relative;
}
.congoods_fourth_swiper .swiper_img{
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
}

希望以上对有需要的你有帮助 笔芯