由于想做成瀑布流，故一開始使用如下的方式：

.waterfall-container {column-count: 2;column-gap: 30rpx; }

但是，由于這種 ?column-count:2 ??，是由上往下排的，所以再加載新的一頁的時候，原來在頁首的會被頂到底部，導致整個邏輯是錯誤的。

?

故，需要修改一下頁面的實現思路

1. 在頁首加入預加載的圖片的不顯示的塊，加載圖片時，會觸發事件，

2. 在事件處理 function 中，進行圖片的分發，根據當前的兩列的實際高度，分發到兩列中。

?

具體實現：

在頁首加上?display: none?的塊，用于預加載圖片。

<view style="display:none"><image wx:for="{{prefetch_products.rows}}" data-id="{{item.id}}" data-image-src="{{item.cover}}" wx:for-item="item" src="{{item.cover}}"bindload="onImageLoad"></image> </view>

?

JS:

onImageLoad: function (e) {var oriHeight = e.detail.height,oriWidth = e.detail.width,scale = oriHeight / oriWidth,destWidth = this.data.imageWidthRpx * rpxScale, // 在不同機型中的具體圖片寬度destHeight = scale * destWidth,id = e.currentTarget.dataset.id,src = e.currentTarget.dataset.imageSrc;// 分發到兩邊var col1 = this.data.col1,col2 = this.data.col2,loadingCount = this.data.loadingCount;// 比較兩邊的height// 哪個矮分發到哪個if (col1.height <= col2.height) {col1.images.push({id: id,src: src});col1.height += (destHeight + 39 * rpxScale); // 補償 padding 的高度--loadingCount;} else {col2.images.push({id: id,src: src});col2.height += (destHeight + 39 * rpxScale); // 補償 padding 的高度--loadingCount;}if (!loadingCount) {this.setData({prefetch_products: []});}this.setData({loadingCount: loadingCount,col1: col1,col2: col2});}

?

轉載于:https://www.cnblogs.com/au_ww/p/7149645.html

總結

以上是生活随笔為你收集整理的小程序瀑布流无限加载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。