小程序实现瀑布流-最简单实现办法

html：

<view class="main">

<view class="leftContainer">

<block wx:for="{{listArr}}" wx:key="index">

<view class="cateItem" wx:if="{{index%2==0}}" data-id="{{item.item_id}}" bindtap="detail">

<view class="item">

<image src="{{item.cover_url}}" class="itemImg" mode="widthFix"></image>

</view>

</view>

</block>

</view>

<view class="rightContainer">

<block wx:for="{{listArr}}" wx:key="index">

<view class="cateItem" wx:if="{{index%2==1}}" data-id="{{item.item_id}}" bindtap="detail">

<view class="item">

<image src="{{item.cover_url?item.cover_url:'https://img.uhomes.com/static/wxapp/uhouzz/images/onorder.jpg'}}" class="itemImg" mode="widthFix"></image>

</view>

</view>

</block>

</view>

</view>

css:

.main {

display: flex;

padding: 10rpx 10rpx;

box-sizing: border-box;

font-size: 24rpx;

}

 

.leftContainer {

display: flex;

margin-right: 10rpx;

flex-direction: column;

}

.rightContainer {

display: flex;

flex-direction: column;

}

.cateItem {

margin-bottom: 20rpx;

}

.item {

width: 360rpx;

box-sizing: border-box;

background: #fff;

border-radius: 6rpx;

}

.itemImg {

margin-bottom: 14rpx;

width: 100%;

vertical-align: middle;

border-radius: 6rpx;

}

js部分自己加上图片数组就好了，原理就是把数组分成了两部分去渲染