How to use HTML, CSS and jQuery to achieve infinite scrolling of a loaded image list

2. CSS styles
Next, we need to set some CSS styles to decorate the image list and control the display of images. The following is an example:

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

3. jQuery implements infinite scrolling loading
In jQuery, we can use the scroll event to monitor the scrolling position of the page, and scroll to the bottom of the page when loading new images.

First, we need to create a function called loadImages to load images, and then call this function when the page is loaded and scrolled.

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();
});

In the above code, the loadImages function determines whether it has scrolled to the bottom of the page by comparing the height of the window, the height of the scroll bar from the top, and the total height of the document. When scrolling to the bottom of the page, it gets the unloaded image URL from the data-src attribute and adds the element to the corresponding list item and Add a class name loaded to mark the image as loaded.

4. Summary
Through the implementation of the above code, we successfully implemented an infinite scrolling image list using HTML, CSS and jQuery. Users only need to scroll to the bottom of the page to automatically load new images, effectively improving the image display effect and user experience. In actual applications, we can further optimize and expand the code according to needs, such as adding loading animations, optimizing resource loading, implementing lazy loading of images, etc., to improve page performance and user experience. We hope that the examples in this article can help readers better understand the implementation principles and methods of infinite scroll loading, and can flexibly apply them in practice.

The above is the detailed content of How to use HTML, CSS and jQuery to achieve infinite scrolling of a loaded image list. For more information, please follow other related articles on the PHP Chinese website!