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

<ul id="image-list">
  <li data-src="image1.jpg"></li>
  <li data-src="image2.jpg"></li>
  <li data-src="image3.jpg"></li>
  <!-- 其他图片项 -->
</ul>

#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;
}

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，然后将<img>元素添加到列表项中
    for (var i = 0; i < imagesToLoad; i++) {
      var nextImage = imageList.find('li:not(.loaded)').first(); // 找到未加载的下一张图片
      var imgUrl = nextImage.data('src'); // 获取图片URL
      nextImage.append('<img src="' + imgUrl + '">').addClass('loaded'); // 添加<img>元素并标记为已加载
    }
  }
}

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

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