微信小程序--瀑布流加载实现

1.wxml

  
        
          
        
      
      
        
          
            
              

                

              
              {{item.name}}
              
                
                  {{item.rent}}
                  元
                
                {{item.published_date}}
              

            
          
        
        
          
            
              
                

              
              {{item.name}}
              
                
                  {{item.rent}}
                  元
                
                {{item.published_date}}
              

            
          
        
      

2.wxss

.collecting-img{
   width: 100%; 
   position: relative;
}
 .collect-img{
  position: absolute;
  bottom: 20rpx;
  right: 16rpx;
  width: 76rpx;
} 
.collecting-name {
  font-size: 26rpx;
  font-weight: bold;
  margin: 20rpx 0 15rpx;
}

.collecting-tag {
   display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  color: #9b9b9b;
  font-size: 18rpx;
  display: flex;
  flex-direction: row;
  margin-top: 9rpx;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between; 
}

.tag text {
  border: 1rpx solid #F1F1F1;
  margin-right: 4rpx;
  padding: 0 9rpx;
  height: 24rpx;
  line-height: 24rpx;
  display: inline-block;
}
.collecting {
  padding: 10rpx 10rpx 20rpx;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  margin-bottom: 20rpx;

}

.collect-out {
   /* width: 100%;  */
   width: 49%; 
  margin-top: 20rpx;
  column-width: 330rpx;   
  column-gap: 20rpx; 
}

.collect-out:after {
  content: '';
  width: 0;
  height: 0;
  display: block;
  clear: both;
}
.price-cost{
  font-size: 26rpx;
}
.price-unit{
  font-size: 18rpx;
}
.price-cost,.price-unit{
  color: #fb4040;
}

3.js

let col1H = 0
let col2H = 0
Page({
  data: {
    imgSrc: app.globalData.imgSrc,
    imgHttp: app.globalData.imgHttp,
    animationData: {},
    col1: [],
    col2: [],
    images: [],
  },
   onLoad: function () {
      //获取商品列表
    wx.request({
      url: request_getGoodsList,
      data: {
        "session3rd": userid,
        "type": 1,
        "cat_ids": menunav,
        "labels": menulist,
        "page": page,
        "pageSize": pageSize
      },
      success: function (res) {
        if (res.data.code == -2) {
          that.setData({
            list: []
          })
        }
        if (res.data.code == 1) {
          var list = res.data.list
          that.setData({
            list: list,
          })
        }
      }
    })
   }
    ,
     // 获取图片的宽高
  onImageLoad: function (e) {
    let imageId = e.currentTarget.id;
    let oImgW = e.detail.width;         //图片原始宽度
    let oImgH = e.detail.height;        //图片原始高度
    let imgWidth = 155.5;  //图片设置的宽度
    let scale = imgWidth / oImgW;        //比例计算
    let imgHeight = oImgH * scale;      //自适应高度
    let imageObj = null;

      let images = this.data.list;
      for (let i = 0; i < images.length; i++) {
        let img = images[i];
        if (img.id === imageId) {
          imageObj = img;
          break;
        }
      }
      let loadingCount = this.data.loadingCount - 1;
      let col1 = this.data.col1;
      let col2 = this.data.col2;
      if (col1H <= col2H) {
        col1H += imgHeight;
        col1.push(imageObj);
      } else {
        col2H += imgHeight;
        col2.push(imageObj);
      }
      let data = {
        loadingCount: loadingCount,
        col1: col1,
        col2: col2
      };
      if (!loadingCount) {
        data.images = [];
      }
      this.setData(data);
  },
  })