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

本文主要介绍小程序的瀑布流加载。实现的原理是，通过bindload监听图片加载，然后计算每张图片的高度,将list根据高度分别，创建2个新数组col1、col2。

1、.xml

  <view class='collect-out'>
        <view style='display:none'>
          <image wx:for="{{list}}" wx:key="" id="{{item.id}}" src="{{imgHttp+item.cover_img}}" bindload="onImageLoad" mode="widthFix" class="collecting-img shadow-bottom" lazy-load="true">image>
        view>
      view>
      <view class='space-between'>
        <view class="collect-out" style='float:left' wx:if="{{col1.length}}">
          <block wx:for="{{col1}}" wx:key="" wx:for-index="idx" wx:for-item="item">
            <view class="collecting user-shadow" bindtap='informDetailtap' id="{{item.id}}">
              <image lazy-load="true" class="collecting-img shadow-bottom fade_in" src="{{imgHttp+item.cover_img}}" mode="widthFix">

                <image lazy-load="true" id='{{item.id}}' data-is='is_collection' class="collect-img fade_in" src="{{imgSrc}}index/collect_{{item.is_collection?'1':'0'}}.png" mode="widthFix" catchtap='collectTap'>image>

              image>
              <text class="collecting-name">{{item.name}}text>
              <view class="space-between">
                <view class="price">
                  <text class="price-cost">{{item.rent}}text>
                  <text class="price-unit">元text>
                view>
                <view class="date">{{item.published_date}}view>
              view>

            view>
          block>
        view>
        <view class="collect-out" style='float:left' wx:if="{{col2.length}}">
          <block wx:for="{{col2}}" wx:key="" wx:for-index="idx" wx:for-item="item">
            <view class="collecting user-shadow" bindtap='informDetailtap' id="{{item.id}}">
              <image lazy-load='true' class="collecting-img shadow-bottom fade_in" src="{{imgHttp+item.cover_img}}" mode="widthFix">
                <image id='{{item.id}}' class="collect-img fade_in" src="{{imgSrc}}index/collect_{{item.is_collection?'1':'0'}}.png" mode="widthFix" catchtap='collectTap'>image>

              image>
              <text class="collecting-name">{{item.name}}text>
              <view class="collecting-tag">
                <view class="price">
                  <text class="price-cost">{{item.rent}}text>
                  <text class="price-unit">元text>
                view>
                <view class="date">{{item.published_date}}view>
              view>

            view>
          block>
        view>
      view>

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);
  },
  })

Tips:小程序需要瀑布流加载，在本站内寻找。