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

瀑布流布局是一种比较流行的页面布局方式，最典型的就是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 < images.length; i++) {            let img = images[i];                   if (img.id === imageId) {               imageObj = img;                break;           }       }       imageObj.height = imgHeight;               let loadingCount = this.data.loadingCount - 1;               let col1 = this.data.col1;               let col2 = this.data.col2;        //判断当前图片添加到左列还是右列       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 < images.length; i++) {           images[i].id = baseId + "-" + i;       }        this.setData({                   loadingCount: images.length,            images: images       });   }})

  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 < images.length; i++) {            images[i].id = baseId + "-" + i;        }        this.setData({            loadingCount: images.length,            images: images        });    }})