瀑布流（小程序版本）

代码思路：

1. 将页面写成左右两部分，左边显示数组的偶数，右边显示数组的奇数；
2. 用js判断图片的高度，用作计算内容的高度（注：图片高度自适应，除图片之外的其他内容的高度应全部一样，方便计算）
3. ！分别计算左右两边的内容高度， 计算两边的高度差（h），查找较高一边的数组中与高度差（h）的一半相近的图片元素；
4. 这里是较为麻烦的一步：需要给每个数组中添加一个参数，例：position，默认为‘center’；如果要将左边的图片移到右边，将第三步中查找出来的元素的‘position’改为‘right’；如果要将右边的图片移到左边，将第三步中查找出来的元素的‘position’改为‘left’；

注：

1. 需要添加延时，等内容全部加载完成之后才可将图片移动，否则无法计算图片的高度；
2. 因为要移动的图片不确定位置，所以图片移动可能会看到有明显的变化；
3. 暂未研究分页加载的需求；

代码：

<view class='list padding_x30 '>
  <view class='li_warp dl liLeft li_left' id='liLeft' >
    <view class='li ' wx:for='{
   
   {list}}' wx:if="{
   
   {item.position=='left' || (index%2 == 0&&item.position=='center')}}" wx:key='' >
      <view class='li_pic' >
        <view class='pic_warp '>
          <image src='{
   
   {item.pic}}' mode='widthFix'   bindload="imageLoadLeft" data-index='{
   
   {index}}'></image>
        </view>
        <view class='pic_text padding20'>
          <view class='label'>足球</view>
          <view class='address_'>河南省郑州市</view>
          <view>2019/01/01 15:00-17:00</view>
        </view>
      </view>
      <view class='tlt bold tlt_height' >不运动，何以健康，何以生活</view>
      <view class='flex_ f24'>
        <view class=' gray' wx:if='{
   
   {false}}'>个人约战</view>
        <view class=' gray' wx:else>球队约战</view>
      </view>
    </view>
  </view>

  <view class='li_warp dl liRight li_right' id='liRight'>
    <view class='li' wx:for='{
   
   {list}}' wx:if="{
   
   {item.position=='right' || (index%2 == 1&&item.position=='center')}}" wx:key='' >
      <view class='li_pic'>
         <view class='pic_warp '>
          <image src='{
   
   {item.pic}}' mode='widthFix' bindload="imageLoadRight" data-index='{
   
   {index}}'></image>
        </view>
        <view class='pic_text padding20'>
          <view class='label'>足球</view>
          <view>河南省郑州市</view>
          <view>2019/01/01 15:00-17:00</view>
        </view>
      </view>
      <view class='tlt bold'>不运动，何以健康，何以生活</view>
      <view class='flex_ f24'>
        <view class=' gray' wx:if='{
   
   {true}}'>个人约战</view>
        <view class=' gray' wx:else>球队约战</view>
      </view>
    </view>
  </view>
</view>

css

.list{position: relative;}
.liLeft{position: absolute;top: 0;left: 30rpx;width: 100%;}
.liRight{position: absolute;top: 0;right: 30rpx;width: 100%;}
.li_warp{width: 44%;}
.li{width: 100%;margin-bottom: 40rpx;}
.li_pic{position: relative;color: #fff;border-radius: 10rpx;overflow: hidden;}
.li_pic .pic_warp{width: 100%;}
.li_pic .pic_warp.picHeight_{height: 250rpx;}
.li_pic .pic_warp image{width: 100%;height: 100%;}
.li_pic .pic_text{position: absolute;bottom: 0;left: 0;width: 100%;font-size: 24rpx;z-index: 1;background: linear-gradient(-180deg, rgba(0,0,0,0.00) 30%, #000000 100%);}
.li_pic .pic_text .label{height: 40rpx;line-height: 40rpx;padding: 0 20rpx;background: #000000;color: #fff;display: inline-block;border-radius: 40rpx;}
.li .tlt{overflow: hidden;text-overflow: ellipsis;word-break: break-all; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:1;margin-top: 16rpx;margin-bottom: 4rpx;}

js：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    //上传的图片高度
    list: [{
      pic: '/image/pic1.jpg',
      position: 'center',
      height: ''
    }, {
      pic: '/image/pic2.jpg',
      position: 'center',
      height: ''
    }, {
      pic: '/image/pic3.jpg',
      position: 'center',
      height: ''
    }, {
      pic: '/image/pic1.jpg',
      position: 'center',
      height: ''
    }, {
      pic: '/image/pic1.jpg',
      position: 'center',
      height: ''
    }, {
      pic: '/image/pic2.jpg',
      position: 'center',
      height: ''
    }, {
      pic: '/image/pic2.jpg',
      position: 'center',
      height: ''
    }, {
      pic: '/image/pic2.jpg',
      position: 'center',
      height: ''
    }, {
      pic: '/image/pic3.jpg',
      position: 'center',
      height: ''
    }, {
      pic: '/image/pic2.jpg',
      position: 'center',
      height: ''
    }, {
      pic: '/image/pic3.jpg',
      position: 'center',
      height: ''
    }, {
      pic: '/image/pic3.jpg',
      position: 'center',
      height: ''
    }, {
      pic: '/image/pic3.jpg',
      position: 'center',
      height: ''
    }, {
      pic: '/image/pic2.jpg',
      position: 'center',
      height: ''
    }, {
      pic: '/image/pic3.jpg',
      position: 'center',
      height: ''
    }, {
      pic: '/image/pic2.jpg',
      position: 'center',
      height: ''
    }],
    leftHeight: 0,
    rightHeight: 0,
    picHeight: '',
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {


  },
  onShow: function () {
    this.height_()
  },

  //左边的图片高度之和
  imageLoadLeft: function (e) {

    //获取图片的原始宽度和高度

    let originalWidth = e.detail.width;

    let originalHeight = e.detail.height;

    let picHeight = this.data.picHeight
    picHeight = 165 / originalWidth * originalHeight

    var list = this.data.list

    let index = e.currentTarget.dataset.index
    list[index].height = picHeight
    this.setData({
      list: list
    })

    this.data.leftHeight += picHeight

  },

  //右边的图片高度之和
  imageLoadRight: function (e) {

    //获取图片的原始宽度和高度

    let originalWidth = e.detail.width;

    let originalHeight = e.detail.height;

    let picHeight = this.data.picHeight
    picHeight = 165 / originalWidth * originalHeight

    var list = this.data.list

    let index = e.currentTarget.dataset.index
    list[index].height = picHeight
    this.setData({
      list: list
    })

    this.data.rightHeight += picHeight

  },
  height_: function () {
    var that = this
    var list = that.data.list
    setTimeout(() => {
      var leftHeight = that.data.leftHeight
      var rightHeight = that.data.rightHeight
      var disparity_ = ''
      disparity_ = Math.abs(leftHeight - rightHeight)
      var min_ = { a: 300, index: 0 }
      // console.log(disparity_)

      if (leftHeight > rightHeight && disparity_ > 100) {
        for (var i = 0; i < list.length; i += 2) {
          var tmp = Math.abs(list[i].height - disparity_) / 2
          if (tmp < min_.a) {
            min_ = { a: tmp, index: i }
            // console.log(min_)
          }
          // console.log(list[i].height, disparity_)

        }
        list[min_.index].position = 'right'
      }
      if (leftHeight < rightHeight && disparity_ > 100) {
        for (var i = 1; i < list.length; i += 2) {
          var tmp = Math.abs(list[i].height - disparity_) / 2
          if (tmp < min_.a) {
            min_ = { a: tmp, index: i }
            // console.log(min_)
          }

          // console.log(list[i].height, disparity_)
        }
        list[min_.index].position = 'left'
      }
      console.log(list)
      this.setData({
        list: list
      })
    }, 1000)
  }
})

效果图：