什么是无限滚动？

您可能已经见过在线商店等网站，当您向下滚动页面时，产品会不断出现。另一个例子是endless.horse，它看起来很简单，但却是演示“Infinite Scrolls”功能的绝佳示例。当您访问该网站时，您会看到一匹马，但是当您向下滚动页面时，您会发现马的腿会无限期地继续生长，而您永远不会到达马的脚。

实现无限滚动

此功能在现代开发中广泛使用。我们可以在主要社交网络上看到无限滚动，例如 Twitter、Facebook，尤其是 Instagram，当我们向下滚动页面时，内容似乎永远不会结束。

在本文中，我将演示此功能的基本实现。然而，这种方法并不能解决诸如长查询、缓存实现以及生产应用程序所需的其他解决方案等问题。尽管如此，这是理解我们如何实现此功能的起点。

第 1 步：决定在何处添加无限滚动功能

首先，决定在哪里添加无限滚动功能。它是帖子列表还是图像列表？您还需要决定数据的来源。在此示例中，我们将使用来自基本 API（Random Fox API）的图像。

第 2 步：创建 HTML 文件

创建 HTML 文件并包含随机狐狸图像的容器。

Fox Images

第 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 




  
  
  第5步：添加滚动事件


要实现无限滚动功能，请添加此事件监听器：


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




如果scrollY和innerHeight之和大于或等于scrollHeight，则意味着我们已经到达文档末尾，因此需要加载更多图像。


  
  
  结论


您的页面现在应该可以使用无限滚动技术。这是您面临的挑战：尝试使用您选择的另一个 API 重做此项目，并实现一些更精细的样式来显示您的项目。祝你好运！