小程序瀑布流布局（完美方案）

大家好，欢迎来到IT知识分享网。

现在越来越多的列表页使用瀑布流方式布局了，今天就来盘一下微信小程序中的瀑布流布局

安排！

下面是两张列表页截图，大家可以看一下：

// list.wxml列表
<import src ="/template/cardList/cardList2.wxml"/>
<block>
  <view id="left">
    <view class="list-index list-index-{ 
   {plType}}" wx:for="{ 
   { leftList }}" wx:key="key">
      <navigator url="/pages/Main/pages/details/index?id={ 
   {item.id}}" hover-class="none">
          <template data="{ 
   { item }}" is="cardList2"/>
      </navigator>
    </view>
  </view>
  <view id="right">
    <view class="list-index list-index-{ 
   {plType}}" wx:for="{ 
   { rightList }}" wx:key="key">
      <navigator url="/pages/Main/pages/details/index?id={ 
   {item.id}}" hover-class="none">
          <template data="{ 
   { item }}" is="cardList2"/>
      </navigator>
    </view>
  </view>
</block>





// list.wxss部分样式

#left,#right{ 
   
  width: 340rpx;
  float: left;
}
#left{ 
   
  margin-right: 24rpx;
  margin-left:24rpx;
}



// list.js

let leftHeight = 0, rightHeight = 0; //分别定义左右两边的高度
let query,timers={ 
   };

Page({ 
   
	onLoad(){ 
   
		// 本示例实际项目 在列表操作中比较复杂，该环节省去了中间的数据接口
		// 单个列表有倒计时
		/*this.isLeft(this.data.datas,'djs')*/
		
		let resArr = [];
		for(let i in res.data.list){ 
   
			resArr.push(res.data.list[i])
		}
		this.isLeft(resArr, '')
	},
	
	async isLeft(goods,dataType) { 
   
	    let list = goods,
	      leftList = this.data.leftList,
	      rightList = this.data.rightList;
	    query = wx.createSelectorQuery().in(this)
	    
	    // 倒计时更新数据列表状态
	    if (dataType == 'djs') { 
   
	      await this.getBoxHeight(leftList, rightList);
	    }
	    else{ 
   
	      for (const item of list) { 
   
	        leftHeight <= rightHeight ? leftList.push(item) : rightList.push(item); //判断两边高度，来觉得添加到那边
	        await this.getBoxHeight(leftList, rightList);
	      }
	    }
  },
  
  getBoxHeight(leftList, rightList) { 
    //获取左右两边高度
    return new Promise((resolve, reject) => { 
   
      this.setData({ 
    
        leftList, 
        rightList 
      }, () => { 
   
        query.select('#left').boundingClientRect();
        query.select('#right').boundingClientRect();
        query.exec((res) => { 
   
          if (res[0] ){ 
   
            leftHeight = res[0].height; //获取左边列表的高度
            rightHeight = res[1].height; //获取右边列表的高度
          }
          resolve();
        });
      });
    })
  }
})

//cardList2.wxml组件

<template name="cardList2">  
  <view class="c-box rds _list cardList2">
    <view class="img-box" style="height:345rpx">
        <image class="imgLoad" mode="aspectFill" style="height:345rpx" src="{ 
   { item.firstPic ? item.firstPic : '/images/imgLoad.png' }}" lazy-load="true" alt=""></image>
        <block wx:if="{ 
   {item.state!=4}}">
          <!-- 倒计时 -->
          <view wx:if="{ 
   { item.state==4.5}}" class="goodStateTip goodStateTipDJS">
            <p class="fs13 num1 ai">
              <image class="fs12" style="width:28rpx;height:28rpx;margin-right:2rpx;display:inline-block;" src="/images/biao.png" alt="" />
              <i class="ing-end-time fs10">{ 
   { 
    item.time.h }}</i>
              <b>:</b>
              <i class="ing-end-time fs10">{ 
   { 
    item.time.m }}</i>
              <b>:</b>
              <i class="ing-end-time fs10">{ 
   { 
    item.time.s }}</i>
            </p>
          </view>
          <view wx:else class="goodStateTip goodStateTipOther">{ 
   { 
    item.nowState }}</view>
        </block>
    </view>
    
    <view class="text-box">
        <view class="fs14 num2" style="height:80rpx;margin-bottom:20rpx;">{ 
   { 
   item.title}}</view>

        <view class="tips clear" 
        style="padding:0;margin-bottom:10rpx;" 
        wx:if="{ 
   { item.rebate && item.state !=5 && item.state != 6 }}">
            <li class="left fan red fs10 hongbao" style="padding:2rpx 10rpx;opacity:{ 
   {item.state==5.55 ? '0' : '1' }}">返<i class="fs10">￥</i><span class="n">{ 
   { 
    item.rebate }}</span></li>
        </view>

        <view class="ai" style="padding:6rpx 0;">
            <view class="fs11 old-price hui">原价<i class="fs10">￥</i><span class="n">{ 
   { 
    item.originalPrice || 0 }}</span></view>
        </view>

        <view class="clear price-box ai">
            <span class="left fs12 red now-price">￥<i class="fs16 bold"><span class="n">{ 
   { 
    item.sellingPrice || 0 }}</span></i></span>
            <span class="right fs12 volume hui">已售<span>{ 
   { 
    item.salesVolume > 0 ? item.salesVolume : 0 }}</span></span>
        </view>
    </view>
  </view>
</template>  


// cardList2.wxss样式

略

vue瀑布流布局：https://blog.csdn.net/qq_37034928/article/details/106098135