纯CSS布局+数据分配技巧达到瀑布流的效果

template部分

<div class="home-product grace-space-between">
                <div class="grace-waterfall-item"  v-for="(lists, indexTab) in auctionList" :key="indexTab">
                    <div class="items" v-for="(item,index) in lists" :key="index" @click="targetLink(item.act_id)">
                        <image mode="widthFix" :src="'http://c3.wentao56.com/'+item.goods_thumb+'/234'"/>
                        <div class="item-text">
                            <h3>{{item.act_name}}</h3>
                            <div class="flex-start">
                                <span>当前价</span>
                                <h4>{{item.last_price?item.last_price+'元':item.formated_start_price}}</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

JS部分

export default {
  data() {
       return {
			auctionList:[[],[]],
		}
	}
	methods：{
		 getList(){  //更多藏品推荐
               this.$axios(this.api.auctionList,this.listQuery,'post').then((res)=>{
                   let myData =res.data.data.auction_list;  //数据列表
                   let lArr = this.auctionList[0];
                   let rArr = this.auctionList[1];
                   for(var i=0;i<myData.length;i++){
                       if (i % 2 == 0) {
                             lArr.push(myData[i]);
                         } else {
                             rArr.push(myData[i]);
                         }
                       this.auctionList=[lArr, rArr]
                   }
                   if(myData.length<this.listQuery.page_size&&(this.listQuery.page==1||this.listQuery.page!=1)){
                       this.loadingType=2;
                       return 
                   }
               })
           }
	}
}

CSS部分

.home-product-container{
      width:678rpx;
      margin:0 auto;
      margin-top:54rpx;
      padding-bottom:30rpx;
      .h-title{
          width:180rpx;
          height:30rpx;
      }
  }
    .home-product {
        display: flex;
        justify-content: space-between;
        flex-wrap:wrap;
        image{
            width:322rpx;
            border-top-left-radius:6rpx;
            border-top-right-radius:6rpx;
        }
    }
    .items{
        width:322rpx;
        border-radius:6rpx;
        margin-top:26rpx;
        border:2rpx solid  #e5e5e5;
        .item-text{
            h3{
                width:286rpx;
                margin:0 auto;
                line-height:38rpx;
                color:#282828;
                font-size:26rpx;
                margin-top:20rpx;
                height: 70rpx;
            }
            .flex-start{
                width:286rpx;
                margin:0 auto;
                display:flex;
                align-items: center;
                margin-top:16rpx;
                padding-bottom:22rpx;
                span{
                    display:block;
                    width:80rpx;
                    height:32rpx;
                    border:1rpx solid #FC7F25;
                    border-radius:4rpx;
                    color:#FC7F25;
                    font-size:22rpx;
                    text-align: center;
                    line-height: 32rpx;
                    margin-right:20rpx;
                }
                h4{
                    font-size:30rpx;
                    color:#FC7F25;
                    font-weight:bold;
                }
            }
        }
    }