微信小程序瀑布流之两列瀑布流

效果图

wxml代码

<scroll-view scroll-y="true" bindscrolltolower="loadImages" >


<view class="bottom">
<view class="bottom_z">

<view id="left">
<view class="left"  wx:for="{{leftList}}" wx:key>
/*  注意图片标签里边添加 mode="widthFix"   */
/*你的卡片代码*/
</view>
</view>

<view id="right">
<view class="right"  wx:for="{{rightList}}" wx:key>
/*  注意图片标签里边添加 mode="widthFix"   */
/*你的卡片代码*/

</view>
</view>
</view>
</view>
</scroll-view>

wxss代码

.bottom{
  width: 100%;
  padding: 20rpx;
}
.bottom_z{
  display:flex;
  justify-content: space-around;
}
.left, .right{
  width: 345rpx;
  border-radius: 10rpx;
  box-shadow: 0 4px 8px 0 #f6f6f6,
   0 6px 20px 0 #f6f6f6;
   margin-top: 20rpx;
   margin-right: 20rpx;
   
}

js代码

let query
let rightHeight = 0 ,leftHeight = 0
let leftnum = -1,rightnum = -1,jia
Page({

 
 data: {
  zzlx:[
    /*填你的数组数据*/
  ],
  leftList:[],
  rightList:[]
 },

  

async isLeft() {
  const { zzlx, leftList, rightList } = this.data;
  query = wx.createSelectorQuery();
  
  for (const item of zzlx) {

    leftHeight <= rightHeight ? leftnum++ : rightnum++;
    leftHeight <= rightHeight ? jia=1 : jia=0;
   
   leftHeight <= rightHeight ? leftList.push(item) : rightList.push(item); 
 
   await this.getBoxHeight(leftList, rightList);
  
  }
 
 },

 async getBoxHeight(leftList, rightList) { //获取左右两边高度
  query = wx.createSelectorQuery();
  return new Promise((resolve, reject) => {
   this.setData({ leftList, rightList }, () => {
    if(jia == 1){
      query.select('#left').boundingClientRect()
      query.exec((res) => {
          leftHeight = res[0].height,
        resolve();
    });
    }else{
      query.select('#right').boundingClientRect();
      query.exec((res) => {
        rightHeight = res[0].height
        resolve();
    });
    }
   });
  })
 },


 onLoad: function (options) {
  this.isLeft()
}
})

这些代码是我花了一天的时间在网上找到的代码然后改了bug，，，，，好累，，

最后放下一个大佬的文章

微信小程序通过js实现瀑布流布局详解_javascript技巧_脚本之家 (jb51.net)