微信小程序 等宽不等高瀑布流

有点标题党了，实际上，小程序布局和h5布局并没有区别，非要说区别，可能是微信对新的css属性的支持没有浏览器好。

先看效果图。

 

实现方式：flex+js分组

wxml:

    <view class="img-box">
		<view class="column"> 
			<view class="img-sec" wx:for="{{imgArr1}}">
				<image src="{{item}}" mode="widthFix"></image>
			</view>
		</view>
		<view class="column">
			<view class="img-sec" wx:for="{{imgArr2}}">
				<image src="{{item}}" mode="widthFix"></image>
			</view>
		</view>
	</view>

　wxss:

.img-box{
	display: flex;
	justify-content: space-between;
}
.column{
	display: flex;
	flex-direction: column;
}
.img-box .img-sec{
	margin-bottom:30rpx;
}
.img-box image{
	display: block;
	width: 338rpx;
	border-radius: 26rpx;
}

　　js:

 test() {
    let imgArr1 = [];
    let imgArr2 = [];
    //服务器上的数据
    let imgArr = res.data.imgs
    for (let i = 0; i < imgArr.length; i++) {
      imgArr1.push(imgArr[i++])
      if (i < imgArr.length) {
        imgArr2.push(imgArr[i])
      }
    }
    this.setData({
      imgArr1: imgArr1,
      imgArr2: imgArr2
    })
  },

　　

参考：https://juejin.im/post/6844904004720263176