有人用column-count属性来做小程序的瀑布流，这样做存在问题，在加载更多数据的时候，页面会重新布局，直观现象就是界面会闪烁，影响体验，所以不用column-count。

我的方法是：

1、界面分两列；

2、总是向较矮的列追加图片；

3、从后端获取图片的尺寸，换算成前端展示的尺寸，记录每列的高度；

4、分页数据也按照上面的原则追加图片。

WXML代码：

  <view class="bricklayout">
    <view class='brickcolumn-l'>
      <image class='spanhalf' wx:for="{{leftPiclist}}" wx:key="index" lazy-load mode='widthFix' src='{{item.key}}' style='height:{{item.modHeight}}'></image>
    </view>

    <view>
      <image class='spanhalf' wx:for="{{rightPiclist}}" wx:key="index" lazy-load mode='widthFix' src='{{item.key}}' style='height:{{item.modHeight}}'></image>
    </view>
  </view>

  <!-- 引用模板展示加载动画 -->
  <template wx:if='{{loadingLatest}}' is="spinloading" /> 

WXSS代码：

.bricklayout {
  display: flex;
}

image {
  display: block;
  width: 49.5vw;
  margin-bottom: 1vw;
  background-color: #f0f0f0;
  background-image: radial-gradient(#d0d0d0 30%, transparent 0),
                      radial-gradient(#d0d0d0 30%, transparent 0);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
}

.spanhalf {
  width: 49.5vw;
}

.spanall {
  width: 100vw
}

.brickcolumn-l {
  margin-right: 1vw;
}

js代码：

var leftHeight = 0, rightHeight = 0;
var page_latest = 0;

Page({
  data: {
    loadingLatest: true,
    leftPiclist: null,
    rightPiclist: null
  },

  onLoad: function () {
    this.getpagedlatest(page_latest)
  },

  getpagedlatest: function (_page) {
    var that = this;
    wx.cloud.callFunction({
      name: 'getpagedlatest', //从微信云函数请求数据
      data: {
        page: _page
      },
      complete: res => {
        if (res.result.data.length > 0) {
          page_latest++;
          res.result.data.forEach(function (value, index) {
            g_galleryLatest.push(value.key)
            value.modHeight = 49.5 * (value.height / value.width)
            // value.height = Math.round(value.height)
            if (leftHeight <= rightHeight) {
              g_leftPiclist.push(value)
              leftHeight += value.modHeight
              leftHeight++  //加上margin值
            } else {
              g_rightPiclist.push(value)
              rightHeight += value.modHeight
              rightHeight++  //加上margin值
            }
            value.modHeight += "vw"
          })

          that.setData({
            leftPiclist: g_leftPiclist,
            rightPiclist: g_rightPiclist,
            loadingLatest: false
          })
        } else {
          that.setData({
            loadingLatest: false
          })
        }
      },
    })
  }

})

可以扫描我的小程序二维码查看实际运行效果：