前端瀑布流布局实现

    list:[
     'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3933500633,3793764385&fm=26&gp=0.jpg',
     'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=4100872422,3923134513&fm=26&gp=0.jpg',
     'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3133265356,1603273935&fm=26&gp=0.jpg',
     'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3673889381,371529118&fm=11&gp=0.jpg',
     'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3472316311,4110746464&fm=26&gp=0.jpg',
     'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3086736054,3375812831&fm=26&gp=0.jpg'
    ]

需要渲染的数组为list

  <view class="box">
    <view class="item">
      <image src="{{item}}" wx:for="{{list}}" wx:for-index="idx" wx:if="{{idx%2===0}}" wx:key="item" class="item1" mode="widthFix">{{item}}</image>
    </view>
    <view class="item">
      <image src="{{item}}" wx:for="{{list}}" wx:for-index="idx" wx:if="{{idx%2===1}}" wx:key="item" class="item2" mode="widthFix">{{item}}</image>
    </view>
  </view>

设置css

.box{
  display: flex;
  width: 100%;
  justify-content: space-around;
}
.item{
  display: flex;
  flex-direction: column;
  width: 45%;
}
.item image{
  margin: 10px 0;
  width: 100%;
}
.item1{
  width: 100%;
}
.item2{
  width: 100%;
}

完成效果