小程序瀑布流實現全指南

一、什麼是小程序瀑布流？

瀑布流是一種非常常見的網頁布局，在不同的屏幕尺寸下都有很好的適應性。簡單來說，瀑布流就是將不同大小的元素按照一定的規則排列，形成一列一列的布局。而小程序瀑布流則是將瀑布流這種布局方式帶入到小程序中，實現動態的渲染效果。

在小程序中實現瀑布流主要通過實現scroll-view的onReachBottom事件監聽，動態地將元素渲染到頁面上。

二、小程序瀑布流的基本原理

在小程序中實現瀑布流的基本原理是使用scroll-view組件，監聽onReachBottom事件，對滾動到底部的頁面進行數據渲染。

具體實現步驟如下：

Step 1：創建scroll-view組件，設置scroll-y屬性，使頁面可以縱向滾動。

Step 2：定義一個瀑布流布局的容器，在該容器中創建多個子元素，每個子元素代表一張圖片。

Step 3：在onLoad事件中，請求數據，並渲染頁面。同時定義一個空數組，用於存儲已經渲染的圖片信息。

Step 4：在onReachBottom事件中，判斷是否還有數據，若有，則加載數據並渲染頁面，並更新已經渲染的圖片信息數組。

在實現上述步驟後，就可以實現小程序瀑布流的基本功能。

三、小程序瀑布流的實現細節

1、計算每一列的高度

在實現瀑布流布局時，需要計算每一列的高度，並將當前圖片渲染到高度最短的那一列。

具體實現方法是定義一個數組，用來存儲每一列的高度。當渲染一張圖片時，遍歷這個數組，找到高度最短的那一列，將當前圖片渲染到該列，並更新該列的高度。

// 定義列數
const colNum = 2;
// 定義每列的寬度
const colWidth = wx.getSystemInfoSync().windowWidth / colNum;

// 定義每一列的高度
let colHeightArr = new Array(colNum).fill(0);

// 獲取圖片信息
const imgWidth = e.detail.width;
const imgHeight = e.detail.height;

// 計算圖片的高度
const height = imgHeight / imgWidth * colWidth;

// 找到高度最短的那一列
const minColHeight = Math.min(...colHeightArr);
const minColIndex = colHeightArr.indexOf(minColHeight);

// 渲染圖片
ctx.drawImage(imgPath, minColIndex * colWidth, minColHeight, colWidth, height);

// 更新高度數組
colHeightArr[minColIndex] += height;

2、防抖動

瀑布流布局需要在滾動到底部時加載數據並進行渲染，但是當用戶快速滑動時，可能會同時觸發多個onReachBottom事件，從而導致重複加載數據。

為了解決這個問題，可以使用防抖函數對onReachBottom事件進行處理，使得在短時間內多次觸發事件時，只處理最後一次事件。

function debounce(fn, wait) {
  let timerId = null;
  return function() {
    if (timerId !== null) {
      clearTimeout(timerId);
    }
    timerId = setTimeout(fn, wait);
  };
}

Page({
  onReachBottom: debounce(function() {
    // 加載數據並渲染頁面
  }, 300)
})

3、圖片預加載

為了提高用戶體驗，當滾動到底部時，可以提前加載下一頁的圖片。

具體實現方法是在滾動到底部時，同時將下一頁的圖片進行預加載。當用戶滑動到下一頁時，該頁的圖片已經被預加載完畢，無需等待加載時間。

// 定義一個變量，用於記錄當前已經預加載到第幾頁
let currentPage = 1;

Page({
  onReachBottom: function() {
    // 加載當前頁數據並渲染頁面
    // 同時預加載下一頁數據
    currentPage++;
    loadNextPage(currentPage);
  }
})

function loadNextPage(pageNum) {
  // 請求下一頁數據並預加載
}

四、實現代碼示例

1、WXML代碼

<scroll-view scroll-y="true" bindscrolltolower="onReachBottom">
  <view class="container">
    <block wx:for="{{imgList}}" wx:key="index">
      <view class="img-wrap">
        <image class="img" mode="aspectFill" 
          src="{{item.url}}" 
          bindload="onImgLoad" 
          data-img="{{item}}">
        </image>
      </view>
    </block>
  </view>
</scroll-view>

2、JS代碼

Page({
  data: {
    imgList: [], // 圖片列表
    screenWidth: 0 // 屏幕寬度
  },
  onLoad: function() {
    // 獲取屏幕寬度
    const screenWidth = wx.getSystemInfoSync().windowWidth;
    this.setData({
      screenWidth: screenWidth
    });

    // 請求第一頁數據並渲染頁面
    const imgData = require('../../imgs/data.js');
    this.setData({
      imgList: imgData.data
    });
    this.renderImg(imgData.data);
  },
  onReachBottom: function() {
    // 加載下一頁數據並渲染頁面
    const imgData = require('../../imgs/data.js');
    this.setData({
      imgList: this.data.imgList.concat(imgData.data)
    });
    this.renderImg(imgData.data);
  },
  onImgLoad: function(e) {
    // 圖片加載完成後渲染圖片
    const imgData = e.currentTarget.dataset.img;
    const imgWidth = imgData.width;
    const imgHeight = imgData.height;
    const ratio = imgWidth / this.data.screenWidth;
    const height = imgHeight / ratio;
    const index = e.currentTarget.dataset.index;
    const ctx = wx.createCanvasContext('canvas-' + index, this);
    ctx.drawImage('../' + imgData.url, 0, 0, this.data.screenWidth, height);
    ctx.draw();
  },
  renderImg: function(imgList) {
    // 渲染圖片
    const len = imgList.length;
    for (let i = 0; i < len; i++) {
      const imgPath = '../' + imgList[i].url;
      const imgWidth = imgList[i].width;
      const imgHeight = imgList[i].height;
      const ratio = imgWidth / this.data.screenWidth;
      const height = imgHeight / ratio;
      const index = this.data.imgList.indexOf(imgList[i]);
      const ctx = wx.createCanvasContext('canvas-' + index, this);
      ctx.drawImage(imgPath, 0, 0, this.data.screenWidth, height);
      ctx.draw();
    }
  }
})

3、CSS代碼

.container {
  display: flex;
  flex-wrap: wrap;
}

.img-wrap {
  width: 50%;
  padding: 5rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

.img {
  width: 100%;
}