微信小程序实现瀑布流

实现思路：

1.由于是左右两排照片而且左右照片每排的每个都有高度,需要先定义变量，

2.遍历数组，通过wx.getImageInfo获取到每个元素图片的宽度和高度(需要配置download的域名)

3.判断这个元素应该是放在左边还是右边(放在数组高度低的一边)

4.最后 this.setData，数据驱动视图，在前端渲染这些数据

5.别忘给image属性加上mode="widthFix"，高度自适应，保持宽高比

附上代码

//在页面的js文件中
 data: {
    //用于接收请求回来的数组的数组
    list: [],
    //左边的数组
    leftList: [],
    //右边的数组
    rightList: [],
    //左边的高度
    leftHeight: 0,
    //右边的高度
    rightHeight: 0,
    //上一个数组处理完了还是没有处理完
    flag: false,
    //触底加载是否全部加载完成的变量
    isEnd: false,
    //定义的pageNum(页码数)，是后台api给的query参数，
    pageNum: 1,
  },
  

//封装的函数

//将数组作为参数放进函数中
 init(list) {
    //刚开始falg是false
    this.data.flag = false
    if (list.length == 0) {
      //如果数组的长度为0就说明处理完了，
      this.data.flag = true
      //返回就不会往下走了
      return
    }
    //定义变量接收数组删除的第一个元素
    let arr = list.shift()
    //wx的处理图片的api，(可以自己去看文档了解一下)
    wx.getImageInfo({     
      src: arr.coverImgUrl,
      success: (res) => {
        //如果左边的高度小于等于右边的高度
        if (this.data.leftHeight <= this.data.rightHeight) {
          //左边的数组接收arr
          this.data.leftList.push(arr)
          //左边的高度去加上 getImageInfo 成功之后返回的数组的高度除以宽度，依靠这个数据去一个一个加起来，来判断加在哪边的数组
          this.data.leftHeight += res.height / res.width
        } else {
          this.data.rightList.push(arr)
          this.data.rightHeight += res.height / res.width
        }
        //更改视图
        this.setData({
          leftList: this.data.leftList,
          rightList: this.data.rightList
        })
      },
      complete: () => {
       //成功或者失败都会走的函数，把参数作为形参再次调用这个函数
        this.init(list)
      }
    })
  },

   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
   //这里我是封装了一个请求，然后请求回来的数据
    postList(1).then(res => {
      console.log(res);
      this.init(res.data.rows)
    })
  },

  

我用的是递归的方法，如果要是改用循环的话可能还要复杂一些

用户下拉刷新

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    this.data.isEnd = false
    if (this.data.flag) {
      //如果请求回来的数组中的数据处理完了，这个flag就会变为false
      this.setData({
        //这里的下拉就相当于重新请求，变量都变为空
        leftHeight: 0,
        rightHeight: 0,
        leftList: [],
        rightList: [],
      })
      postList(1).then(res => {
        console.log(res);
        //重新调用函数
        this.init(res.data.rows)
      })
      //这个是页码变为1
      this.data.pageNum =1
    } else {
      return
    }
  },

上拉触底加载更多

  onReachBottom() { 
    //还是如果处理完上次请求的数组数据就运行
    if (this.data.flag) {
      //如果上拉请求的数据请求完了就变为true
      if (!this.data.isEnd) {
        //页码加1
        this.data.pageNum++
        postList(this.data.pageNum).then(res => {
          console.log(res);
          if (this.data.pageNum * 10 >= res.data.total) {
            console.log('最后一页');
            this.init(res.data.rows)
            this.setData({
              isEnd:true
            })
          }else{
            this.init(res.data.rows)
          }
        })
      }
    }
  },