jsData: {
 columnsHeight: [0, 0],
 isLoading: false
},
data: {
 columns: [
  [],
  []
 ],
 tempPics: []
}

onLoad: function() {
 this.loadData()
},
onReachBottom: function() {
 this.loadData()
}

<view class="hide">
 <image wx:for="{{tempPics}}" src="/UploadFiles/2021-04-02/{{item.pic}}">

主要是image组件的bindload来获取实际宽高，这里还增加了binderror，防止出现图片加载出错的时候卡死


loadPic: function(e) {
 var that = this,
  data = that.data,
  tempPics = data.tempPics,
  index = e.currentTarget.dataset.index
 if (tempPics[index]) {
  //以750为宽度算出相对应的高度
  tempPics[index].height = e.detail.height * 750 / e.detail.width
  tempPics[index].isLoad = true
 }
 that.setData({
  tempPics: tempPics
 }, function() {
  that.finLoadPic()
 })
}



获取到宽高后，以750为宽度计算出相对应的高度并存储，然后增加一个加载完成的标记。加载出错后就强制高度为750，这样展示的时候就是一个正方形。


单个图片加载完成并存储后调用finLoadPic方法来判断所有图片是否都加载完成。


遍历列表，只要有一个图片没有加载完成的标记，就判断为没有加载完成。


加载完成后进入下一步。


finLoadPic: function() {
 var that = this,
  data = that.data,
  tempPics = data.tempPics,
  length = tempPics.length,
  fin = true
 for (var i = 0; i < length; i++) {
  if (!tempPics[i].isLoad) {
   fin = false
   break
  }
 }
 if (fin) {
  wx.hideLoading()
  if (that.jsData.isLoading) {
   that.jsData.isLoading = false
   that.renderPage()
  }
 }
}



3、等所有图片加载完成后遍历列表，将图片插入到高度低的那一栏，同时更新该栏高度


这里需要再便利一遍列表，根据当前栏位的高度情况，将图片插入到高度底的那一栏，同时把这一栏高度加上当前图片的高度（不是实际高度，是上一步以750为宽度算出来的高度）


renderPage: function() {
 var that = this,
  data = that.data,
  columns = data.columns,
  tempPics = data.tempPics,
  length = tempPics.length,
  columnsHeight = that.jsData.columnsHeight,
  index = 0
 for (var i = 0; i < length; i++) {
  index = columnsHeight[1] < columnsHeight[0] "_blank" href="https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.getImageInfo.html" rel="external nofollow" >wx.getImageInfo来获取图片的宽高（点击查看具体代码），代码也精简了很多。但是实际比较下来速度要比用image组件慢，初步推测原因是wx.getImageInfo会返回本地路径，多了写本地临时文件的时间


ps：用到瀑布流的地方，最好能后端直接返回图片的宽高，省去小程序端获取宽高的麻烦


再ps：我个人并不建议小程序端使用瀑布流


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。