微信小程序中实现瀑布流布局和无限加载

瀑布流布局是一种比较流行的页面布局方式，最典型的就是Pinterest.com，每个卡片的高度不都一样，形成一种参差不齐的美感。

在HTML5中，我们可以找到很多基于jQuery之类实现的瀑布流布局插件，轻松做出这样的布局形式。在微信小程序中，我们也可以做出这样的效果，不过由于小程序框架的一些特性，在实现思路上还是有一些差别的。

今天我们就来看一下如何在小程序中去实现这种瀑布流布局：

let col1H = 0;let col2H = 0;

Page({    data: {        scrollH: 0,        imgWidth: 0,        loadingCount: 0,        images: [],        col1: [],        col2: []
   },    onLoad: function () {
       wx.getSystemInfo({            success: (res) => {                
       let ww = res.windowWidth;                
       let wh = res.windowHeight;                
       let imgWidth = ww * 0.48;                
       let scrollH = wh;                
       this.setData({                    
       scrollH: scrollH, 
       imgWidth: imgWidth
               });                //加载首组图片
               this.loadImages();
           }
       })
   },    onImageLoad: function (e) {        
   let imageId = e.currentTarget.id;        
   let oImgW = e.detail.width;         //图片原始宽度
       let oImgH = e.detail.height;        //图片原始高度
       let imgWidth = this.data.imgWidth;  //图片设置的宽度
       let scale = imgWidth / oImgW;        //比例计算
       let imgHeight = oImgH * scale;      //自适应高度

       let images = this.data.images;        let imageObj = null;        
       for (let i = 0; i 
  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);
    },    loadImages: function () {        let images = [
            { pic: "../../images/1.png", height: 0 },
            { pic: "../../images/2.png", height: 0 },
            { pic: "../../images/3.png", height: 0 },
            { pic: "../../images/4.png", height: 0 },
            { pic: "../../images/5.png", height: 0 },
            { pic: "../../images/6.png", height: 0 },
            { pic: "../../images/7.png", height: 0 },
            { pic: "../../images/8.png", height: 0 },
            { pic: "../../images/9.png", height: 0 },
            { pic: "../../images/10.png", height: 0 },
            { pic: "../../images/11.png", height: 0 },
            { pic: "../../images/12.png", height: 0 },
            { pic: "../../images/13.png", height: 0 },
            { pic: "../../images/14.png", height: 0 }
        ];        let baseId = "img-" + (+new Date());        
        for (let i = 0; i