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部分自己加上图片数组就好了，原理就是把数组分成了两部分去渲染