客户讲列表不好看要瀑布流，搞了半天没搞好，一行两列，总是高度高的决定一行的高度，flex解决不了
找了网上的方法。有个比较暴力的思路：整个页面左右分成两列，单列只显示一篇文章的宽度，左列显示奇数，右列显示偶数，这样模拟瀑布流。确实可行。
效果：
代码如下：
<view class='article-list'> <view class="left"> <block wx:for="{{list}}" wx:for-index="idx" wx:key="{{idx}}" wx:for-item="vo"> <template is="item" data="{{...vo}}" wx:if="{{idx%2==0}}"></template> </block> </view> <view class="right"> <block wx:for="{{list}}" wx:for-index="idx" wx:key="{{idx}}" wx:for-item="vo"> <template is="item" data="{{...vo}}" wx:if="{{idx%2==1}}"></template> </block> </view> </view> <!-- 下面是一个模块 --> <template name="item"> <view class='item-box' bindtap='toDetail' data-id='{{id}}'> <image src='{{pic_url}}' mode='widthFix'></image> <view class='item-box-title'>{{title}}</view> <view class='item-box-time'> <view class='item-box-time-left'>{{c_time}}</view> <view class='item-box-time-right'>{{browse_num}}次浏览</view> </view> </view> </template> /* 流布局 */ .article-list { display: flex; flex-direction: row; flex-wrap: wrap; } .left, .right { display: inline-block; vertical-align: top; width: 50%; } .right { float: right; } .item-box { display: flex; flex-direction: column; justify-content: center; width: 100%; padding: 15rpx; box-shadow: #cccccc 0rpx 0rpx 5rpx; } .item-box > image { width: 100%; vertical-align: top; } .item-box-title{ font-size: 28rpx; padding: 15rpx; } .item-box-time{ font-size: 28rpx; display: flex; flex-direction: row; } .item-box-time-left,.item-box-time-right{ flex: 1; font-size: 26rpx; } .item-box-time-right{ text-align: right; }js中的数据就不写了，数组对象后端返回的。PS，想到一个问题，如果所有文章都是奇数短，偶数长，列表尾部会不会出现右侧很长，左侧比较短的问题。
