小程序设置列表瀑布流（两列）

小程序设置列表瀑布流，当不知道列表数据中的图片元素在等宽时的高度数据时，不太好设置左、右边数据，所以通过：先将当前获取到的列表数据中的图片显示在页面中，用bindload='pubuImgLoad'事件来获取设置所有图片在等宽时的高度，再将计算出的高度数据存储在当前列表项JSON中，再根据左、右边容器的高度，逐个将列表项添加在左、右边容器中的数组中

app.js中加处理方法：

  //处理设置最新获取到的瀑布流数据
  setCurNewPubuImgData: function (oldImgDataJson) {
    let oldImgData = [];
    for (var item in oldImgDataJson) {
      oldImgData[item] = oldImgDataJson[item];
    }
    return oldImgData;
  },
  //处理存储瀑布流左右两边数据
  setCurResultsPubuImgData(newImgData, oldData, leftH, rightH ,callback) {
    //let leftH = 0;
    //let rightH = 0;

    let resultsList = {
      listL: [],
      listR: [],
    }

    let leftStart = 0;
    let rightStart = 0;

    for (var item in newImgData) {
      //console.log(leftH, rightH, newImgData[item].h);
      //console.log(leftH <= rightH);
      if (leftH <= rightH){
        resultsList.listL[leftStart] = oldData[item];
        leftStart ++;
        leftH += newImgData[item].h;
      }else{
        resultsList.listR[rightStart] = oldData[item];
        rightStart ++;
        rightH += newImgData[item].h;
      }
    }
    callback(resultsList , leftH, rightH);
  }

index.wxss中

.get_pubu_img{ display: none;}

index.wxml中

  <!--瀑布流所需，图片显示前用来获取图片等宽时的高度-->
  <view class='get_pubu_img'>
    <image wx:for="{{pubuliuNewArrData}}" mode='widthFix' data-key='{{index}}' bindload='pubuImgLoad' src="{{item.src}}"  />
  </view>
  
  
  <view class="li_box">
      <view class="li_l">
          <block wx:for="{{pubuliuResultsList.listL}}">
            <navigator class="li" hover-class="none" url="">
               
            </navigator>
          </block>
      </view>
      <view class="li_r">
          <block wx:for="{{pubuliuResultsList.listR}}">
            <navigator class="li" hover-class="none" url="">
               
            </navigator>
          </block>
      </view>
  </view>

index.js中

var app = getApp();

var leftHstart = 0, rightHstart = 0; //加载下页瀑布流数据时，前面数据的左右盒子高度
var newImgData = []; //处理瀑布流所需变量

var canLoadNextPage = false;

index.js中加处理方法

  //初始化 / 清空 页面数据(页面加载时、筛选数据加载第一页时 调用)
  initFun: function () {
    let This = this;
    leftHstart = 0, rightHstart = 0; //加载下页瀑布流数据时，前面数据的左右盒子高度
    newImgData = []; //处理瀑布流所需变量

    This.setData({
      pageSize: 1, //页码

      pubuliuNewArrData: '',
      pubuliuResultsList: '',

    });
  },
  

  /*
  瀑布流相关处理:
  1、处理最新加载的瀑布流数据中图片，先显示，再根据 bindload 获取 并 存储 与 原来KEY 相对应的 等宽情况下的高度 数组
     => newImgData[key].h （key 与最新加载的JSON数据的 key 相同）
  2、根据所有图片加载完成后，调用app.js中方法，设置左、右两边数据
  */
  pubuImgLoad: function (e) {
    let This = this;
    let inListIndex = e.currentTarget.dataset.key;
    //console.log(e.detail.width);
    //console.log(inListIndex);
    newImgData[inListIndex] = {};
    newImgData[inListIndex].h = (300 / e.detail.width) * e.detail.height;
    if (newImgData.length == This.data.pubuliuNewArrData.length) {
      //防止最后一个数据中的图片先加载完成，这样lenth也相等
      for (let i = 0; i < newImgData.length; i++) {
        if (!newImgData[i]) {
          return;
        }
      }
      //newImgData 获取的最新数据 - newImgData[key].h （key 与最新加载的JSON数据的 key 相同）
      //This.data.pubuliuNewArrData 获取的最新数据（处理过的数组） - This.data.pubuliuNewArrData[key]. （key 与最新加载的JSON数据的 key 相同）
      //leftHstart 本次数据加载 前 的 左 边高度
      //rightHstart 本次数据加载 前 的 右 边高度
      app.setCurResultsPubuImgData(newImgData, This.data.pubuliuNewArrData, leftHstart, rightHstart, function (pubuliuResultsList, leftH, rightH) {
        //console.log(pubuliuResultsList);
        leftHstart = leftH;
        rightHstart = rightH;

        if (This.data.pubuliuResultsList) {
          pubuliuResultsList.listL = This.data.pubuliuResultsList.listL.concat(pubuliuResultsList.listL);
          pubuliuResultsList.listR = This.data.pubuliuResultsList.listR.concat(pubuliuResultsList.listR);
        }

        This.setData({
          pubuliuResultsList: pubuliuResultsList,
          pubuliuNewArrData: '',
        });
        setTimeout(function () {
          canLoadNextPage = true;
        }, 500);
      })
    }
  },

index.js中加载列表数据

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let This = this;

    This.initFun(); //初始化 / 清空 页面数据
    This.getListData(); //获取页面列表数据
  },


  //滚动到底部加载更多
  onReachBottom: function () {
    let This = this;
    if (This.data.ifHaveMore) {
      //console.log('加载一下页');
      if (!canLoadNextPage) {
        return;
      }
      newImgData = [];
      This.setData({
        pubuliuNewArrData: '',
        pageSize: This.data.pageSize + 1
      });

      This.getListData(); //获取页面列表数据
    }
  },




  //获取页面列表数据
  getListData: function () {
    let This = this;

    wx.showLoading({
      title: '加载中',
    })

    //查询数据 所需参数
    let dataJson = {
      page: This.data.pageSize, //页码
    }


    /*test*/
    let res = {
      status: 1,
      ifHaveMore: This.data.pageSize > 2 ? false : true, //是否还有下一页
      list: {
        0: {
          id: '001',
          title: This.data.pageSize + '页1111111',
          userhead: 'https://iconfont.alicdn.com/t/1550898018467.jpeg@100h_100w.jpg',
          nickname: '昵称昵称昵称111',
          zannum: 88,
          ifzan: true,
          src: "https://img.t.sinajs.cn/t5/skin/public/profile_cover/001_s.jpg?version=b97b8caee54a6c78",
          linkUrl: '/pages/home/index'
        },
        1: {
          id: '002',
          title: This.data.pageSize + '页222222222222',
          userhead: 'https://avatar.csdn.net/D/5/3/3_qq_16494241.jpg',
          nickname: '昵称昵称昵称222',
          zannum: 88,
          ifzan: false,
          src: "https://img2018.cnblogs.com/news/24442/201902/24442-20190214124232223-959977867.jpg",
          linkUrl: '/pages/home/index'
        },
        2: {
          id: '003',
          title: This.data.pageSize + '页33333333333333',
          userhead: 'https://avatar.csdn.net/D/5/3/3_qq_16494241.jpg',
          nickname: '昵称昵称昵称333',
          zannum: 88,
          ifzan: false,
          src: "https://s3.ifanr.com/wp-content/uploads/2018/08/211.jpg!720",
          linkUrl: '/pages/home/index'
        },
        3: {
          id: '004',
          title: This.data.pageSize + '页44444444444444',
          userhead: 'https://iconfont.alicdn.com/t/1550898018467.jpeg@100h_100w.jpg',
          nickname: '昵称昵称昵称444',
          zannum: 88,
          ifzan: true,
          src: "https://t1.hddhhn.com/uploads/tu/201512/14/87.jpg",
          linkUrl: '/pages/home/index'
        },
      }
    }

    if (res.status == 1) {
      This.setData({
        ifHaveMore: res.ifHaveMore, //是否还有下一页
        pubuliuNewArrData: app.setCurNewPubuImgData(res.list) //处理设置最新获取到的瀑布流数据
      });
    }

    setTimeout(function () {
      wx.hideLoading();
    }, 1000)
    /*test*/

    return;

    //请求获取数据
    wx.request({
      url: '获取列表数据', //仅为示例，并非真实的接口地址
      data: dataJson,
      header: {
        'content-type': 'application/json' // 默认值
      },
      success(res) {

        wx.hideLoading();
      }
    })
  },