微信小程序瀑布流，可直接體驗

先看效果：

直接體驗：

還可以的話，再看代碼：
js：

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) {
    console.log(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: "cloud://normainv/00001.jpg", height: 0 },
      { pic: "cloud://nov/00002.jpg", height: 0 },
      { pic: "cloud://normal-ennv/00003.jpg", height: 0 },
      { pic: "cloud://normal-env-ta6pc.6e6f-normal-env-tanv/00004.jpg", height: 0 },
      { pic: "cloud://normalv/00005.jpg", height: 0 },
      { pic: "cloud://normaleinv/00006.jpg", height: 0 },
      { pic: "cloud://normal-einv/00007.jpg", height: 0 },
      { pic: "cloud://normal-env-ta6pc.6e6f-normal-env-tanv/00008.jpg", height: 0 },
      { pic: "cloud://normal-env-ta6pc.6eeinv/00009.jpg", height: 0 },
      { pic: "cloud://normal-env-pc.6e/00010.jpg", height: 0 },
      { pic: "cloud://normal-env-te6v/00011.jpg", height: 0 },
      { pic: "cloud://normal-env-ta6pc.6e6f-normal-env-tanv/00012.jpg", height: 0 },
      { pic: "cloud://normal-env-taormal-env-tanv/00014.jpg", height: 0 },
      { pic: "cloud://normal-env-tanv/00015.jpg", height: 0 }
    ];

    let baseId = "img-" + (+new Date());

    for (let i = 0; i < images.length; i++) {
      images[i].id = baseId + "-" + i;
    }
    console.log(images.length)
    this.setData({
      loadingCount: images.length,
      images: images
    });
  }
})

wxml

<view style="display:none">
  <image wx:for="{{images}}" wx:key="id" id="{{item.id}}" src="{{item.pic}}" bindload="onImageLoad"></image>
</view>
<scroll-view scroll-y="true" style="height:{{scrollH}}px" bindscrolltolower="loadImages">
  <view style="width:100%">
    <view class="img_item">
      <view wx:for="{{col1}}" wx:key="id">
        <image src="{{item.pic}}" style="width:100%;height:{{item.height}}px"></image>
      </view>
    </view>
    <view class="img_item">
      <view wx:for="{{col2}}" wx:key="id">
        <image src="{{item.pic}}" style="width:100%;height:{{item.height}}px"></image>
      </view>
    </view>
  </view>
</scroll-view>

wxss

.img_item {
  width: 48%;
  margin: 1%;
  display: inline-block;
  vertical-align: top;
}