小程序实现瀑布流

先上代码

<view class="list">
  <view class='list-half'>
    <view wx:for="{{listData}}" wx:key="index" wx:if="{{index%2 == 0}}" class='card'>
    </view>
  </view>
  <view class='list-half'>
    <view wx:for="{{listData}}" wx:key="index" wx:if="{{index%2 != 0}}" class='card'>
    </view>
  </view>
</view>

list为总的容器分成左右两个list-half,用wx:if判断当前是第几条数据，如果为偶数则显示在左边的list-half，如果为奇数则显示在右边的list-half。以此类推。

css

.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;
  border-radius: 20rpx;
  overflow: hidden;
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
}

list总的容器为flex布局，分成左右两个，每个card根据需求随意布局；

效果图如下