摘要：實際效果如下這樣就實現了一個微信小程序下的瀑布流。實際效果可以打開微信，掃描左邊二維碼，直接體驗。或者微信小程序搜索拍照大全。

1.1、瀑布流，又稱瀑布流式布局。是比較流行的一種網站頁面布局，圖片的寬度是固定的，高度自動。視覺表現為參差不齊的多列布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數據塊并附加至當前尾部。

3.2、定義基本的wxss樣式

.content_list{position: relative;}
.list{width: 350rpx;min-height: 200rpx;}
.img_item{width: 100%;}

這里有個差別，就是我沒有給.list這個class設置padding了，因為在微信小程序下是不能夠操作節點獲取樣式的。
后面我們將根據圖片的寬度動態計算左右兩邊以及左邊一列圖片的padding。同時這里圖片的單位用的是rpx。主要是為了適應不同屏幕終端。
3.3、js動態計算加載項的樣式。
兩種方案，第一種定義一個隱藏域，用于存放圖片，當圖片加載的時候綁定加載事件獲取圖片的寬高

主要js代碼如下：

onImageLoad: function (e) {
        let imageId = e.currentTarget.id;
        let oImgW = e.detail.width;         //圖片原始寬度
        let oImgH = e.detail.height;        //圖片原始高度
        let imgWidth = (this.data.winWidth - 20) * 0.48;
        let scale = imgWidth / oImgW;        //比例計算
        let imgHeight = scale * oImgH;
        let imgObj = {
            id: imageId,
            width: imgWidth,
            height: imgHeight
        };
        imgLen++;
        for (let i = 0; i < temResImgArr.length; i++) {
            if (temResImgArr[i].id == imageId) {
                temResImgArr[i].width = imgWidth;
                temResImgArr[i].height = imgHeight;
                break;
            }
        }
        if (imgLen == temResImgArr.length) {//圖片遍歷完
            this.waterFall();
        }

    },
    onImageError: function (e) {
        imgLen++;
    },
     waterFall: function () {
        for (let i = 0; i < temResImgArr.length; i++) {
            if (heightArr.length < 2 && i < 2) {
                heightArr.push(temResImgArr[i].height + 10);
            } else {
                let minH = Math.min.apply(null, heightArr);
                let index = heightArr.indexOf(minH);
                temResImgArr[i].top = `${minH}`;
                temResImgArr[i].left = `${360 * index}rpx`;
                heightArr[index] += (temResImgArr[i].height + 10);
            }
        }
        let maxH = Math.max.apply(null, heightArr);
        let temp = this.data.imgArr;
        temp.push(...temResImgArr);
        this.setData({
            imgArr: temp,
            viewHeight: maxH,
            temImgArr: []
        });
        //重置數據。
        temResImgArr = [];
        imgLen = 0;
        wx.hideToast();
    },

但是這種方案并不是最優，需要定義2個臨時數組來處理加載的圖片，同時用戶等待的時間太長，必須要等所有圖片加載完后獲取到所有的高度后才能夠展示出來，體驗很不好。
既然花了大部分時間在獲取圖片寬高上面，那么為什么不能夠從接口輸出圖片寬高呢？
所以要么上傳圖片的時候把寬高錄入db，但是這種并沒有什么意義。要么就是輸出的時候處理，這時想到了PHP有個getimagesize函數（PHP是世界上最好的語言有木有），可以獲取到圖片的寬高。這樣就不用改db了。
備注：這里更正下，組內大神一眼就看出輸出時候用getimagesize函數處理存在性能問題，就是高并發的時候、服務器帶寬很容易耗盡，不同進程之間拉取同樣圖片還無法利用緩存。最后還是改為將圖片寬高存入后臺。
且看改進后的js代碼：

 onLoad: function () {
        let self = this;
        imgLen = 0;
        heightArr = [];
        wx.getSystemInfo({
            success: function (res) {
                let imgW = Math.floor(350 * (res.windowWidth) / 750);//圖片在當前屏幕尺寸下的實際寬度
                let colW = Math.floor((res.windowWidth - 2 * imgW) / 3);//左右兩邊邊距和圖片邊距的寬度
                self.setData({
                    winWidth: res.windowWidth,
                    winHeight: res.windowHeight,
                    colW: colW,
                });
                self.getImgInfo();
            }
        })
    },
waterFall: function (data) {
        let j = 0;
        for (let i = 0; i < data.length; i++) {//遍歷動態加載的數據
            let imgW = Math.floor(350 * this.data.winWidth / 750);//獲取圖片在當前屏幕下的實際寬度
            data[i].height = Math.floor(imgW * data[i].height / data[i].width);
            if (heightArr.length < 2 && i < 2) {
                heightArr.push(data[i].height + this.data.colW);//實際高度+動態邊距
                data[i].top = `0`;
                data[i].left = i == 0 ? `${imgW * i + this.data.colW}` : `${imgW * i + 2 * this.data.colW}`;
            } else {
                let minH = Math.min.apply(null, heightArr);
                let index = heightArr.indexOf(minH);
                data[i].top = `${minH}`;
                data[i].left = index == 0 ? `${imgW * index + this.data.colW}` : `${imgW * index + 2 * this.data.colW}`;
                heightArr[index] += (data[i].height + this.data.colW);
            }
        }
        let maxH = Math.max.apply(null, heightArr);
        let temp = this.data.imgArr;
        temp.push(...data);//追加到當前圖片列表中
        this.setData({
            imgArr: temp,
            viewHeight: maxH,
        });
        //重置數據。
        temp=null;
        imgLen = 0;
        wx.hideToast();
    },

實際效果如下：

這樣就實現了一個微信小程序下的瀑布流。實際效果可以打開微信，掃描左邊二維碼，直接體驗。或者微信小程序搜索拍照POSE大全。里面附很多美圖，各種拍照姿勢等你來完善，來補充，歡迎體驗并上傳自己的小姿勢。
PS：無雙不成對，一張圖太單調，請容許我再附上最近做的一款美的砍價小程序,美的認證，砍到即可購買。最近天氣熱，有購買家電的朋友可以掃碼購買。

最后，如果你有更優的解決方案請告訴我，我們一起探討，歡迎點評!