小程序流式布局

这只是一个取巧的方式来实现流式布局，有潜在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: ''

})

}