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

本文主要介绍小程序的瀑布流加载。实现的原理是，通过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 = 0let col2H = 0Page({  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:小程序需要瀑布流加载，在本站内寻找。