首頁  >  文章  >  web前端  >  使用 JavaScript 理解和實現無限滾動

使用 JavaScript 理解和實現無限滾動

王林
王林原創
2024-07-23 12:35:31693瀏覽

Entendendo e Implementando o Scroll Infinito com JavaScript

什麼是無限滾動?

您可能已經看過線上商店等網站,當您向下捲動頁面時,產品會連續出現。另一個例子是endless.horse,它看起來很簡單,但卻是示範「無限捲軸」功能的絕佳範例。當您訪問該網站時,您會看到一匹馬,但是當您向下滾動頁面時,您會發現馬的腿會無限期地生長,而您永遠不會到達馬的腳。

實現無限滾動

此功能在現代開發中廣泛使用。我們可以在主要社交網路上看到無限滾動,例如 Twitter、Facebook,尤其是 Instagram,當我們向下滾動頁面時,內容似乎永遠不會結束。

在本文中,我將示範此功能的基本實作。然而,這種方法並不能解決諸如長查詢、快取實作以及生產應用程式所需的其他解決方案等問題。儘管如此,這是理解我們如何實現此功能的起點。

第 1 步:決定在何處添加無限滾動功能

首先,決定在哪裡加入無限滾動功能。它是帖子列表還是圖像列表?您還需要決定資料的來源。在此範例中,我們將使用來自基本 API(Random Fox API)的映像。

第 2 步:建立 HTML 文件

建立 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>
第 3 步:建立 CSS 文件

對於這個範例,我們將保持樣式表非常簡單。

.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;
}
第 4 步:建立 JavaScript 文件

選擇容器並取得 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();
步驟5:新增滾動事件

要實現無限滾動功能,請新增此事件監聽器:

window.addEventListener('scroll', () => {
  if (window.scrollY + window.innerHeight >= document.documentElement.scrollHeight) {
    loadImages();
  }
});

如果scrollY和innerHeight總和大於或等於scrollHeight,則表示我們已經到達文件末尾,因此需要載入更多圖片。

結論

您的頁面現在應該可以使用無限滾動技術。這是您面臨的挑戰:嘗試使用您選擇的另一個 API 重做此項目,並實作一些更精細的樣式來顯示您的項目。祝你好運!

以上是使用 JavaScript 理解和實現無限滾動的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn