jQuery Waypoint + Masonry

Question

使用：jQuery Waypoint和Masonry創建無限滾動網格佈局。此外，他們工作正常。但是，我無法弄清楚如何讓他們一起工作。

代碼航點

$(document).ready(function() { 
var $loading = $(""), 
$footer = $('footer'), 
opts = { 
    offset: '100%', 
    continuous: 'true' 
}; 


$footer.waypoint(function(event, direction) { 
    $footer.waypoint('remove'); 
    $('body').append($loading); 
    $.get($('.more a').attr('href'), function(data) { 
     var $data = $(data); 
     $('#containerd').append($data.find('.poster3')); 
     $('.more').replaceWith($data.find('.more')); 
     $footer.waypoint(opts); 
    }); 
}, opts); 
}); 

代碼爲砌體（更新動畫2011年9月18日）

var $j = jQuery.noConflict(); 
$j(function(){ 
$j('#mason3').masonry({ 
itemSelector: '.poster3', 
isAnimated: !Modernizr.csstransitions 
}); 
}); 

我已經看過了砌體無限滾動的例子，但我不能獲得無限滾動以在我的頁面上工作（這就是我使用Waypoint開始的原因）。

問題是，當div加載Waypoint時，他們沒有正確地將自己對齊通過砌體網格。除此之外，任何rel =標籤在加載的對象上都被取消（也使用工具提示腳本創建html工具提示）。

所以基本上，我正在做的事：[1]當div通過航點裝載，更新網格佈局與新加載的航點divs 而保持任何數據從所述div完整（正常發射）像上述工具提示問題。這個問題的例子可以在http://regchan.org/ib/dev/第一手看到。 （該頁面設置爲初始加載4個div，這是前4個div，然後從以下頁面加載4（如果適用），直到沒有更多可用爲止。）

.poster3是div的類，它持有圖像，＃mason是圍繞動態創建內容的選擇器div。

編輯 拍了一下從砌體網站無限滾動代碼，並縫合在一起的東西（雖然它不斂數據）：

var $j = jQuery.noConflict(); 
$j(function(){ 
var $jcontainer = $j('#mason'); 
$jcontainer.imagesLoaded(function(){ 
$jcontainer.masonry({ 
itemSelector: '.poster3', 
}); 
}); 
(function() { 
var $jloading = $j(""), 
$jfooter = $j('footer'), 
opts = { 
offset: '100%', 
continuous: 'true' 
}; 
$jfooter.waypoint(function(event, direction) { 
$jfooter.waypoint('remove'); 
$j('body').append($jloading); 
$j.get($j('.more a').attr('href'), function(data) { 
var $jdata = $j(data); 
$j('#containerd').append($jdata.find('.poster3')); 
$j('.more').replaceWith($jdata.find('.more')); 
$jfooter.waypoint(opts); 
}); 
}, opts)}); 
// trigger Masonry as a callback 
function(newElements) { 
var $jnewElems = $j(newElements); 
// ensure that images load before adding to masonry layout 
$jnewElems.imagesLoaded(function(){ 
$jcontainer.masonry('appended', $jnewElems, true); 
}); 
} 
} 
); 

螢火蟲不拋出任何錯誤的儘管如此。

Answer 1

這裏很簡單但完整的解決方案，他們沒有任何困難結合起來：

<script src="js/vendor/masonry.pkgd.min.js"></script> 
<script src="js/waypoints.min.js"></script> 
<script src="js/waypoints-infinite.js"></script> 

<script> 
     $(window).load(function() { 
      var container = $('.infinite-container'); 
      container.masonry({ 
       itemSelector: '.box' 
      }); 
      $('.infinite-container').waypoint('infinite', { 
       container: 'auto', 
       items: '.box', 
       more: '.infinite-more-link', 
       offset: 'bottom-in-view', 
       loadingClass: 'infinite-loading', 
       onBeforePageLoad: $.noop, 
       onAfterPageLoad: function() { 
        $(container).masonry('reloadItems'); 
        $(container).masonry('layout') 
       } 
      }); 
     }); 
</script>