您可能已經看過線上商店等網站,當您向下捲動頁面時,產品會連續出現。另一個例子是endless.horse,它看起來很簡單,但卻是示範「無限捲軸」功能的絕佳範例。當您訪問該網站時,您會看到一匹馬,但是當您向下滾動頁面時,您會發現馬的腿會無限期地生長,而您永遠不會到達馬的腳。
此功能在現代開發中廣泛使用。我們可以在主要社交網路上看到無限滾動,例如 Twitter、Facebook,尤其是 Instagram,當我們向下滾動頁面時,內容似乎永遠不會結束。
在本文中,我將示範此功能的基本實作。然而,這種方法並不能解決諸如長查詢、快取實作以及生產應用程式所需的其他解決方案等問題。儘管如此,這是理解我們如何實現此功能的起點。
首先,決定在哪裡加入無限滾動功能。它是帖子列表還是圖像列表?您還需要決定資料的來源。在此範例中,我們將使用來自基本 API(Random Fox API)的映像。
建立 HTML 檔案並包含隨機狐狸圖像的容器。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Fox Images</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1 class="header">Fox Images</h1> <div class="container"></div> <script src="script.js"></script> </body> </html>
對於這個範例,我們將保持樣式表非常簡單。
.container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .header { font-size: 32px; color: black; text-align: center; font-family: Verdana, sans-serif; } img { width: 400px; height: 400px; margin: 4px; object-fit: cover; }
選擇容器並取得 Random Fox API URL。不要忘記在 HTML 中連結您的 JavaScript 和 CSS 文件。
const container = document.querySelector('.container'); const URL = "https://randomfox.ca/images/"; function getRandomNumber() { return Math.floor(Math.random() * 100); } function loadImages(numImages = 6) { let i = 0; while (i < numImages) { const img = document.createElement('img'); img.src = `${URL}${getRandomNumber()}.jpg`; container.appendChild(img); i++; } } loadImages();
要實現無限滾動功能,請新增此事件監聽器:
window.addEventListener('scroll', () => { if (window.scrollY + window.innerHeight >= document.documentElement.scrollHeight) { loadImages(); } });
如果scrollY和innerHeight總和大於或等於scrollHeight,則表示我們已經到達文件末尾,因此需要載入更多圖片。
您的頁面現在應該可以使用無限滾動技術。這是您面臨的挑戰:嘗試使用您選擇的另一個 API 重做此項目,並實作一些更精細的樣式來顯示您的項目。祝你好運!
以上是使用 JavaScript 理解和實現無限滾動的詳細內容。更多資訊請關注PHP中文網其他相關文章!