로드된 이미지 목록의 무한 스크롤을 달성하기 위해 HTML, CSS 및 jQuery를 사용하는 방법

#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，然后将元素添加到列表项中 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(); });