关于前端:微信小程序瀑布流照片墙

实现相似小红书首页照片墙瀑布流的成果
1. 实现左右两侧布局
2. 获取图片高度动静插入高度小的一列
3. 长列表滚动优化

   <scroll-view
      scroll-y='true'
      class='category-wrapper'
      bindscrolltolower="scrolltolower"
      threshold="100"
    >
      <view class="fall">
        <view class="fall-column" wx:for="{{picList}}" wx:for-item="column" wx:key="index">
          <view class="fall-column-item" wx:for="{{column}}" wx:key="index" wx:for-item="item">
            <image
              lazy-load
              class="fall-column-item-img"
              src="{{item.imgUrl}}"
              data-url="{{item.imgUrl}}"
              data-id="{{item.id}}"
              mode="widthFix"
              bindtap="preview"
              >
            </image>
            <view bind:longpress="toCopy" data-text="{{item.description}}"  wx:if="{{item.description}}">{{item.description}}</view>
          </view>
        </view>
      </view>
    </scroll-view>

2. 通过 wx.getimageinfo 获取图片信息，图片高度
用一个长度为 2 的数组 heightArr 记录曾经加载的图片的高度，比拟第 1 项和第 2 项的大小，而后把新的图片的高度累加到较小的一项上。

import api from '../../api/index'
Page({
  data: {list: [],
    heightArr: []},
  async onLoad () {let {results} = await api.fetchImages()
    let col = 2
    for (let i in results) {results[i].cover = results[i].imageUrl
      // 获取图片信息
      let info = await this.loadImage(results[i].cover)
      results[i].height = 165 / info.width * info.height
      if (i < col) {this.data.list.push([results[i]])
        this.data.heightArr.push(results[i].height)
      } else {let minHeight = Math.min.apply(null, this.data.heightArr)
        let minHeightIndex = this.data.heightArr.indexOf(minHeight)
        this.data.list[minHeightIndex].push(results[i])
        this.data.heightArr[minHeightIndex] += results[i].height
      }
    }
    this.setData({list: this.data.list})
  },
  loadImage (cover) {
    return new Promise(resolve => {
      wx.getImageInfo({
        src: cover,
        success: (res) => {resolve(res)
        }
      })
    })
  }
})

通过增加伪元素过渡图片加载显示的成果

.fall-column-item::after {
  content: '加载中';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  color: #666;
}