我正在尝试用我的图像实现无限滚动。我所有的图片都在一个名为 img 的文件夹中（50 张图片），我每页显示 10 张图片。当我试图通过无限滚动附加图像时，我无法做到这一点。我遇到了错误。谁能建议我如何在这上面实现无限滚动插件。任何建议都会有所帮助。
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Image Gallery with Infinite Scrolling and Masonry</title>
<style>
.gallery {
display: flex;
flex-wrap: wrap;
}
.gallery-item {
width: 25%;
padding: 10px;
}
.gallery-item img {
width: 100%;
}
.pagination {
display: none;
}
@media screen and (max-width: 768px) {
.gallery-item {
width: 50%;
}
}
@media screen and (max-width: 480px) {
.gallery-item {
width: 100%;
}
}
</style>
</head>
<body>
<div class="gallery">
<?php
// Retrieve all the available image names from a directory and save them into an array
$dir = "img/";
$images = glob($dir."*.{jpg,jpeg,png,gif}", GLOB_BRACE);
// Calculate the total number of pages based on the number of images and the number of images per page
$images_per_page = 10;
$total_pages = ceil(count($images) / $images_per_page);
// Retrieve the current page number from the URL query string or set it to 1 if it's not present
$current_page = isset($_GET["page"]) ? $_GET["page"] : 1;
// Calculate the starting index and ending index of images to display based on the current page number and the number of images per page
$start_index = ($current_page - 1) * $images_per_page;
$end_index = $start_index + $images_per_page;
// Generate HTML code for each image in the directory and display it on the webpage
for ($i = $start_index; $i < $end_index && $i < count($images); $i++) {
echo '<div class="gallery-item">';
echo '<a href="'.$images[$i].'" data-lightbox="gallery">';
echo '<img src="img/placeholder.jpg" data-src="'.$images[$i].'" alt="Gallery Image">';
echo '</a>';
echo '</div>';
}
?>
</div>
<?php if ($current_page < $total_pages): ?>
<div class="pagination">
<a href="?page=<?php echo $current_page + 1; ?>"></a>
</div>
<?php endif; ?>
<script src="https://code.jquery.com/jquery-3.6.4.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/4.0.1/infinite-scroll.pkgd.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/17.3.0/lazyload.min.js"></script>
<script src="app.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var lazyLoadInstance = new LazyLoad({
elements_selector: ".gallery img",
threshold: 500,
callback_loaded: function(element) {
var masonryInstance = $(".gallery").data("masonry");
masonryInstance.layout();
}
});
var $container = $(".gallery");
$container.imagesLoaded(function() {
$container.masonry({
itemSelector: ".gallery-item",
columnWidth: ".gallery-item",
percentPosition: true,
});
});
$(".gallery").infinitescroll({
navSelector: ".pagination",
nextSelector: ".pagination a:first",
itemSelector: ".gallery-item",
loading: {
finishedMsg: "No more images to load.",
img: "https://i.imgur.com/6RMhx.gif"
},
path: function() {
var nextPage = this.pageNumber + 1;
if (nextPage <= <?php echo $total_pages; ?>) {
return "index.php?page=" + nextPage;
} else {
return null;
}
}
}, function(newElements) {
$(newElements).imagesLoaded(function() {
$container.masonry("appended", $(newElements));
lazyLoadInstance.update();
});
});
});
</script>
</body>
</html>
我试过 infinitescroll 的文档
let elem = document.querySelector('.container');let infScroll = new InfiniteScroll( elem, {// optionspath: function() {var nextPage = this.pageNumber + 1;if (nextPage <= <?php echo $total_pages; ?>) {return "index.php?page=" + nextPage;} else {return null;}},append: '.gallery-item',history: false,});
这不起作用。我无法理解如何通过路径。因为我可以通过'
index.php?page=3