Я пытаюсь работать с плагинами Packery и infinitescroll jquery, но по какой-то причине новые элементы появляются друг на друга.Packery + Infinitescroll + imagesLoaded = не работает
Я был направлен на плагин с изображениями, однако по какой-то причине он, похоже, накладывает элементы друг на друга. Я применил исправление для плагина Smart Scroll для jQuery 1.9 (https://github.com/lukeshumard/smartscroll/pull/2), однако, я считаю, что проблема связана с изображениями и упаковкой.
Мой сценарий выглядит следующим образом:
$(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.