无限AJAX滚动,砖石和PHP图像库图像重叠
好的,第一个问题。我有一个php脚本,可以将文件夹中的图像拉入列表项,它还具有分页选项。我应用了砖石来制作网格,现在我尝试集成,这样我就可以增量地提取新图像,因为最终的图库将相当大。 到目前为止,无限卷轴正在加载下面的连续页面,并堆叠其他页面。如果我取下砖石,它似乎能像预期的那样工作 源代码: 呈现代码:无限AJAX滚动,砖石和PHP图像库图像重叠,php,ajax,jquery-masonry,infinite-scroll,infinite,Php,Ajax,Jquery Masonry,Infinite Scroll,Infinite,好的,第一个问题。我有一个php脚本,可以将文件夹中的图像拉入列表项,它还具有分页选项。我应用了砖石来制作网格,现在我尝试集成,这样我就可以增量地提取新图像,因为最终的图库将相当大。 到目前为止,无限卷轴正在加载下面的连续页面,并堆叠其他页面。如果我取下砖石,它似乎能像预期的那样工作 源代码: 呈现代码: 经过一周的搜索,我在另一篇帖子中找到了答案: ... #masonry ul { width:100%; lis
经过一周的搜索,我在另一篇帖子中找到了答案:
...
#masonry ul {
width:100%;
list-style: none;
}
#masonry li {
float: left;
list-style: none;
}
#imageList {border:2px solid;}
.ias-trigger {
position:absolute;
bottom:0px;
left:300px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="scripts/masonry.pkgd.js"></script>
<script src="scripts/imagesloaded.pkgd.min.js"></script>
<script src="scripts/jquery-ias.min.js"></script>
</head>
<body>
<div id="masonry">
<ul id="imageList">
<?php
$dsg_pagination_per_page = 10;
$dsg_thumb_operation = 'scale';
$dsg_thumb_width = 300;
$dsg_thumb_height =300;
?>
<?php include 'dsg.php'; ?>
</ul>
</div>
<br>
<?php echo $dsg_pagination_nav; // print pagination links ?>
<script>
var $container = $('#imageList');
//initialize Masonry after all images have loaded
$container.imagesLoaded( function() {
$container.masonry();
});
var ias = $.ias({
container: "#imageList",
item: ".item",
delay:1200,
pagination: "#pagination",
next: ".next a"
});
ias.extension(new IASSpinnerExtension());
ias.extension(new IASNoneLeftExtension({html: '<div style="text-align:center; position:absolute; bottom:0; left0;"><p><em>You reached the end!</em></p></div>'}));
</script>
</body>
</html>