如何使用HTML、CSS和jQuery实现无限滚动加载的图片列表

二、CSS样式
接下来，我们需要设置一些CSS样式来装饰图片列表，并控制图像的显示。以下是一个示例：

立即学习“前端免费学习笔记（深入）”；

紫东太初

中科院和武汉AI研究院推出的新一代大模型

下载

#image-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#image-list li {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: #f2f2f2;
  margin: 10px;
  border-radius: 5px;
  overflow: hidden;
}

#image-list li img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

三、jQuery实现无限滚动加载
在jQuery中，我们可以使用scroll事件来监听页面滚动的位置，并在滚动到页面底部时加载新的图片。

首先，我们需要创建一个名为loadImages的函数来加载图片，然后在页面加载完成和滚动时调用该函数。

function loadImages() {
  var windowHeight = $(window).height(); // 当前窗口的高度
  var scrollHeight = $(document).height(); // 文档的总高度
  var scrollTop = $(window).scrollTop(); // 滚动条距离顶部的高度

  // 当滚动到页面底部时加载新的图片
  if (scrollTop + windowHeight == scrollHeight) {
    var imageList = $('#image-list');
    var imagesToLoad = 10; // 每次加载的图片数量

    // 根据需要加载的图片数量，从data-src属性中获取对应的图片URL，然后将元素添加到列表项中
    for (var i = 0; i < imagesToLoad; i++) {
      var nextImage = imageList.find('li:not(.loaded)').first(); // 找到未加载的下一张图片
      var imgUrl = nextImage.data('src'); // 获取图片URL
      nextImage.append('').addClass('loaded'); // 添加元素并标记为已加载
    }
  }
}

// 页面加载完成时加载初始图片
$(document).ready(function() {
  loadImages();
});

// 当页面滚动时加载更多图片
$(window).scroll(function() {
  loadImages();
});

以上代码中，loadImages函数通过比较窗口高度、滚动条距离顶部的高度和文档总高度，判断是否滚动到了页面底部。当滚动到页面底部时，它会从data-src属性中获取未加载的图片URL，并将元素添加到相应的列表项中，并添加一个类名loaded来标记该图片已加载。

四、总结
通过上述代码的实现，我们成功地实现了使用HTML、CSS和jQuery实现无限滚动加载的图片列表。用户只需滚动页面到底部，就能自动加载新的图片，有效提升图片展示的效果与用户体验。在实际应用中，我们可以根据需求对代码进行进一步优化和扩展，例如添加加载动画、优化资源加载、实现图片懒加载等，以提升页面性能和用户体验。希望本文的示例能帮助读者更好地理解无限滚动加载的实现原理和方法，并能在实践中灵活运用。