小程序实战：如何用瀑布流布局打造更美观的界面

效果图

布局，一左一右两个 view，都循环显示listData ，根据 position 属性判断是否显示，图片高度后台 发布的时候 记录存在

思路，初始化 左右的高度，分别为ileftHeight=0, rightHeight=0, 把图片的高度依次 递增到 左或右(对比那边低)

<view class="list">
  
  <view class='list-half'>
    <view wx:for="{{listData}}" wx:key="index" wx:if="{{item.position == 0}}" class='card'>
      <image src="{{item.cover}}" style="height:{{item.coverHeight}}px"/>
      {{item.content}}
    </view>
  </view>
  <view class='list-half'>
    <view wx:for="{{listData}}" wx:key="index" wx:if="{{item.position == 1}}" class='card'>
      <image src="{{item.cover}}" style="height:{{item.coverHeight}}px"></image>
      {{item.content}}
    </view>
  </view>
  
</view>

样式:

/index.wxss/

.page {
  display: block;
  min-height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.list {
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.list .list-half {
  width: 346rpx;
  box-sizing: border-box;
}
.list-half .card {
  background-color: #fff;
  overflow: hidden;
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
}


.list-half .card image{
  border-radius: 20rpx;
  width: 346rpx;
}

js 代码

//index.js

//获取应用实例
const app = getApp()


Page({
  data: {
    listData: [],
    winHeight: 0,
    rightHeight: 0,
    leftHeight: 0
  },
  loadImageList: function () {
    //模拟数据
    var listDataTemp = []
    for (var i = 0; i < 10; i++) {
      var data = {
        'content': '我的领克03' + i,
        'cover': 'https://i0.hippopx.com/photos/483/394/510/cat-sweet-kitty-animals-1358efbc3d7bdb5115bc9f02e4fff866.jpg',
        'coverHeight': 80 + (i * 10),
        'labels': ['帅,性能车'],
        'username': '尊贵的领克03车主' + i,
        'avatar': 'https://i0.hippopx.com/photos/483/394/510/cat-sweet-kitty-animals-1358efbc3d7bdb5115bc9f02e4fff866.jpg',
        'likeCount': 100 + i,
        'replyCount': 11 + i,
        'createDate': '2020-12-09',
        'position': 0
      }
      listDataTemp.push(data)
      var data1 = {
        'content': '我的领克03' + i + 1000,
        'cover': 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607508312126&di=fac6e006327bd8a17a7d4cceb6ed78c1&imgtype=0&src=http%3A%2F%2Fbbs-fd.zol-img.com.cn%2Ft_s208x130c5%2Fg6%2FM00%2F0F%2F01%2FChMkKV9UU1uIHkXxAAeyohd-JKgAAB8KQINcIwAB7K6206.jpg',
        'coverHeight': 100,
        'labels': ['帅,性能车'],
        'username': '尊贵的领克03车主' + i,
        'avatar': 'https://i0.hippopx.com/photos/483/394/510/cat-sweet-kitty-animals-1358efbc3d7bdb5115bc9f02e4fff866.jpg',
        'likeCount': 100 + i,
        'replyCount': 11 + i,
        'createDate': '2020-12-09',
        'position': 1
      }
      listDataTemp.push(data1)
    }
    return listDataTemp;
  },
  /**
   * 处理布局
   * @param {*} listDataTemp
   */
  handlerLayout: function(listDataTemp){
    for (var i = 0; i < listDataTemp.length; i++) {
      //获取图片高度
      var coverHeight = listDataTemp[i].coverHeight;
      //获取左右高度
      var rightHeight = this.data.rightHeight;
      var leftHeight = this.data.leftHeight;
      //高度差大于10
      console.dir('当前图片高度:' + coverHeight)
      console.dir(listDataTemp[i]['content'])


      if (leftHeight >= rightHeight) {
        console.dir('左高，左高:' + leftHeight + '---右高:' + rightHeight)
        listDataTemp[i]['position'] = 1;
        this.setData({
          rightHeight: rightHeight + coverHeight
        })
      } else {
        console.dir('右高,左高:' + leftHeight + '---右高:' + rightHeight)
        listDataTemp[i]['position'] = 0;
        this.setData({
          leftHeight: leftHeight + coverHeight
        })
      }
    }
    this.setData({
      listData: listDataTemp
    });
  },
  onLoad: function () {
    //获取模拟数据
    var listDataTemp = this.loadImageList()
    this.handlerLayout(listDataTemp)
  }
})

数据结构如下 ：