我一直在尝试让 Packery 和无限滚动 jquery 插件工作，但是由于某种原因，新元素出现在彼此之上。
我被引导到 imagesloaded 插件，但由于某种原因，它似乎将元素叠加在一起。我为 jQuery 1.9 ( https://github.com/lukeshumard/smartscroll/pull/2 )应用了 Smart Scroll 插件的修复程序，但是我相信问题在于图像加载和打包。
我的脚本如下所示：
$(document).ready(function() {
// declaring variables
var $sidebar = $("#sidebarHolder"),
$sidebarwidth = $sidebar.width(),
$window = $(window),
$windowheight = $window.height(),
$offset = $sidebar.offset(),
$topPadding = $("#sitewide").height(),
$container = $('#container.clearfix');
// making sure the sidebar stays the right size when it's resized
$(window).on("resize",function () {
$("[role=sidebar]").width($sidebarwidth).show();
$("#sidebarHolder,[role=sidebar]").height($windowheight + 20);
}).resize();
// scroll 'stick to the top' function
$(window).on("scroll",function() {
if ($window.scrollTop() > $offset.top) {
$sidebar.addClass('sticky');
}else{
$sidebar.removeClass('sticky');
}
}).scroll();
$container.packery({
itemSelector:'article.item',
columnWidth:"div.grid-sizer",
rowHeight:"div.grid-sizer",
gutter:"div.gutter-sizer",
transitionDuration:'0.2s'
});
$container.infinitescroll({
navSelector:'div.paginate',
nextSelector:'div.paginate a.next',
itemSelector:'article.item',
loading:{
finishedMsg:'No more pages to load.'
}
},
function(newElements) {
$(newElements).imagesLoaded(function(){
$container.packery('appended', newElements);
});
});
});
任何帮助，将不胜感激。
如有必要，我可以设置一个 jsbin 或 codepen。