砌體插件返回錯誤時使用無限滾動在tumblr

Question

我知道很多人已經寫了這個，但我覺得我接近解決這個問題。

我正在嘗試使用已安裝砌體的主題，但現在客戶端需要無限滾動，這導致了我的問題。

最初我在控制檯上看到了砌體和無限滾動插件的錯誤，現在至少我只看到磚石錯誤。它看起來好像無限滾動功能正在調用後續頁面的帖子，只是砌體正在努力將它們追加到正確佈局的頁面。

我認爲這是我的回調函數，但擔心我可能還需要調用一個imagesLoaded函數（這個插件也是通過主題調用）。

我當前主題的副本，在這裏：http://kod-temp.tumblr.com/

的嵌入式腳本是這樣的：

var $wall = $('#posts'); 

$(window).load(function() { 
// Grid 
    $wall.masonry({ 
    columnWidth: 84, 
    itemSelector: '.post:visible' 
}); 

// infinite scroll 
$('#posts').infinitescroll({ 
    navSelector : ".pagination", // selector for the paged navigation (it will be hidden) 
    nextSelector : ".pagination a:first", // selector for the NEXT link (to page 2) 
    itemSelector : "#posts .post" // selector for all items you'll retrieve 
}, 
// trigger Masonry as a callback 
function(newElements) { 
    var $newElems = $(newElements); 
    $wall.masonry('appended', $newElems); 
    } 
); 

的標記遵循一個簡單的塊這樣的：

<div id="posts"> 
    <article class="post"></div> 
</div> 

的錯誤是：

Uncaught TypeError: undefined is not a function 
masonry.js:10 

（http://static.tumblr.com/qlf79cn/tGeleg9g0/masonry.js）

Answer 1

那麼我終於有一些工作代碼。 JS的現在看起來是這樣的：被要求

(function() { 
    var $tumblelog = $('#posts'); 
    $tumblelog.infinitescroll({ 
     navSelector: ".pagination", 
     nextSelector: ".pagination a:last-child", 
     itemSelector: "article", 
    }, function (newElements) { 
     var $newElems = $(newElements).css({ 
      opacity: 0 
     }); 
     $newElems.imagesLoaded(function(){ 
      $newElems.animate({ 
       opacity: 1 
      }); 
      $tumblelog.masonry('appended', $newElems); 
     }); 
    }); 
    $tumblelog.imagesLoaded(function(){ 
     $tumblelog.masonry({ 
      columnWidth: 84 
     }); 
    }); 
})(); 

的imagesLoaded腳本（這個問題也得到了我here提出）。