「分享」高性能双列瀑布流极简实现（附示例）

前言

在日常开发过程中，经常会有双列瀑布流场景的需求出现，如商品列表、文章列表等，本文将简单介绍这种情景下如何高效、精准的实现双列瀑布流场景，支持刷新、加载更多等，实现效果如下。

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;
}