Packery + Infinitescroll + imagesLoaded =無法正常工作

Question

我一直在試圖讓Packery和infinitescroll jquery插件工作，但是由於某些原因新元素出現在彼此之上。

我被引導到了圖片加載插件，但由於某種原因，它似乎將元素疊加在一起。我爲jQuery 1.9（https://github.com/lukeshumard/smartscroll/pull/2）的智能滾動插件應用了一個修復程序，但是我相信問題在於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。

Answer 1

似乎是鉻金絲雀的問題，因爲它在其他瀏覽器中工作...