实现相似小红书首页照片墙瀑布流的成果
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;}