私はPackeryとinfinitescroll jqueryプラグインを動作させようとしてきましたが、何らかの理由で新しい要素が重なり合って表示されます.
私は imagesloaded プラグインに誘導されましたが、何らかの理由で要素を互いに重ねているようです。jQuery 1.9 ( https://github.com/lukeshumard/smartscroll/pull/2 ) の Smart Scroll プラグインの修正を適用しましたが、問題は imagesloaded と packery にあると思います。
私のスクリプトは次のようになります。
$(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 をセットアップできます。