这只是一个取巧的方式来实现流式布局，有潜在bug，原理是布局分成两列，将要显示的数据也分成奇数列和偶数列，左侧展示偶数列数据，右侧展示奇数列数据。
潜在的bug是如果偶数列里的图片高度一直比奇数列的高，就会两列一列特别长的情况。
修复此潜在bug的博客链接https://blog.csdn.net/u012011360/article/details/88051196
效果图：
html部分：
<view class='list'>
<view class='listLeft left'>
<block wx:for="{{goodsLeft}}" wx:key="{{item.id}}">
<view class='item' >
<image src='{{item.goodsPhotoUrl}}' mode="widthFix" data-id='{{item.id}}' bindtap='goGoodsDetail'></image>
</view>
</view>
<view class='listRight left'>
<block wx:for="{{goodsRight}}" wx:key="{{item.id}}">
<view class='item' >
<image src='{{item.goodsPhotoUrl}}' mode="widthFix" data-id='{{item.id}}' bindtap='goGoodsDetail'></image>
</view>
</view>
</view>
css部分：
.left{
float:left;
}
.listLeft,.listRight{
width: 340rpx;
}
.listRight{
margin-left: 20rpx;
}
js部分：
var result = res.data;
//console.info(result.data.goods);
if (result.code == 0) {
var goods = result.data.goods;
var goodsRight = [];
var goodsLeft = [];
for (var i = 0; i < goods.length;i++){
if(i%2==0){
goodsLeft.push(goods[i]);
}else{
goodsRight.push(goods[i]);
}
}
console.info(goods);
that.setData({
goods: goods,
goodsRight: goodsRight,
goodsLeft: goodsLeft,
noGoods: 'hide',
more: ''
})
}