微信小程序实现瀑布流（FlowLayout）效果

前言：小程序不同于安卓直接提供布局的配置，而必须要像写前端页面一样来写。并且小程序没有像web网页的DOM和BOM操作，准确的来说是存在这么个API的，但是我测试使用的时候，得到的数据总是不尽人意，地址为这个https://developers.weixin.qq.com/miniprogram/dev/api/wxml/SelectorQuery.html，想去了解的去看下，对于我来说就当没有好了。一心想要这个操作是因为需要获取当前容器的高度用来判断插入图片的位置，最后也没有用到这个API，采用了另外一种方法。

总体思想：

1. 将整个大的容器划分为两个小的容器
2. 判断容器的高度选择图片插入的位置（这个是正确的思想，但是我找不到具体的方法，有了解的同学欢迎评论让我学习一下，最终我的策略是将图片的宽高进行了保存，依靠图片原本的高进行判断，还别说，出来的效果也是不错的）

数据源：

data: {
    images : [// 准备展示的图片 线上就可以采用从后台拿来的数据
      { url: "../../images/4.jpg", height: 313, width: 500 },
      { url: "../../images/5.jpeg", height: 2560, width: 1440 },
      { url: "../../images/6.jpeg", height: 1216, width: 700 },
      { url: "../../images/1.jpg", height: 1200, width: 1920 },
      { url: "../../images/2.jpg", height: 1200, width: 1920 },
      { url: "../../images/3.jpg", height: 300, width: 533 },
    ],
    leftShowImages : [],// 左边已经展示的图片
    rightShowImages: [],// 右边已经展示的图片
    leftHeight : 0,// 左容器的高度
    rightHeight : 0,// 右容器的高度
    index : 0// 已经加载图片的索引
  },

核心代码（项目所有代码已经上传GitHub）

Page({

  data: {
    images : [// 准备展示的图片
      { url: "../../images/4.jpg", height: 313, width: 500 },
      { url: "../../images/5.jpeg", height: 2560, width: 1440 },
      { url: "../../images/6.jpeg", height: 1216, width: 700 },
      { url: "../../images/1.jpg", height: 1200, width: 1920 },
      { url: "../../images/2.jpg", height: 1200, width: 1920 },
      { url: "../../images/3.jpg", height: 300, width: 533 },
    ],
    leftShowImages : [],// 左边已经展示的图片
    rightShowImages: [],// 右边已经展示的图片
    leftHeight : 0,
    rightHeight : 0,
    index : 0// 已经加载图片的索引
  },

  onLoad: function () {
    var length = this.data.images.length
    for (var i = 0; i < length; i++) {
      this.loadImage(this)
    }
  },

  loadImage : function (that) {
    var leftHeight = this.data.leftHeight// 左容器高度
    var rightHeight = this.data.rightHeight// 右容器高度
    var index = this.data.index// 加载图片的索引
    var images = this.data.images// 总共要加载的图片

    var min = Math.min(leftHeight, rightHeight)// 计算左右容器高度的最小值
    // 添加要新加载的图
    if (min == leftHeight) {
      var leftShowImages = this.data.leftShowImages
      leftShowImages.push(images[index])
      that.setData({
        leftShowImages: leftShowImages
      })

      // 获取图片高度
      leftHeight += images[index].height

      // console.log("左高度" + leftHeight)

    } else {
      var rightShowImages = this.data.rightShowImages
      rightShowImages.push(images[index])
      that.setData({
        rightShowImages: rightShowImages
      })

      // 获取图片高度
      rightHeight += images[index].height

      // console.log("右高度" + rightHeight)

    }

    // 索引加1
    index++;
    that.setData({
      index : index,
      leftHeight : leftHeight,
      rightHeight : rightHeight
    })
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    this.setData({
      index : 0
    })

    var length = this.data.images.length
    for (var i = 0; i < length; i++) {
      this.loadImage(this)
    }
  },

})

效果图：