前言
在日常开发过程中，经常会有双列瀑布流场景的需求出现，如商品列表、文章列表等，本文将简单介绍这种情景下如何高效、精准的实现双列瀑布流场景，支持刷新、加载更多等，实现效果如下。
BeautifulPics 小程序
小程序截图
开发思路
瀑布流视图有一种参差的美感，常规列表布局如 flex wrap 等由于存在行高度限制，无法让第二行的 item 对齐上一行最矮处，因此，瀑布流布局时采用双列 scrollview 的 flex 布局。
参差布局的实现，采用代码计算左右两列的高度，然后对左右两列总高度进行比较，新加入的 item 总是排在总高度较小的那列后面。
计算时可以尽可能的缓存高度，例如左右两列高度在每次计算时都缓存起来，有新的 item 加入列表时直接增加左右两列高度即可，不需要重新从头计算。
index.js
const tplWidth = (750 - 24 - 8) / 2;
const tplHeight = 595; // plWidth * 1.66
newPhotos.forEach(photo => {
const {
height,
width
} = photo
let photoHeight = tplWidth
if (height > width) {
photoHeight = tplHeight
photo.display = 'long'
} else {
photo.display = 'short'
}
if (leftHeight < rightHeight) {
leftList.push(photo)
leftHeight += photoHeight
} else {
rightList.push(photo)
rightHeight += photoHeight
}
})
index.wxml
<!-- list -->
<view class='list'>
<!-- left -->
<view class='left-list'>
<block wx:for="{{leftList}}" wx:key="{{item._id}}">
<cell photo="{{item}}" bindclick='onCellClicked' />
</block>
</view>
<!-- right -->
<view class='right-list'>
<block wx:for="{{rightList}}" wx:key="{{item._id}}">
<cell photo="{{item}}" bindclick='onCellClicked' />
</block>
</view>
</view>
index.css
.list {
display: flex;
flex: 1;
position: relative;
flex-direction: row;
justify-content: space-between;
padding-left: 12rpx;
padding-right: 12rpx;
padding-top: 8rpx;
}
.left-list {
display: flex;
position: relative;
flex-direction: column;
width: 359rpx;
}
.right-list {
display: flex;
position: relative;
flex-direction: column;
width: 359rpx;
}
