jQueryウェイポイント+石積み

Question

jQueryウェイポイントと石積みを使用して、無限のスクロールグリッドレイアウトを作成します。離れて、彼らはうまく動作します。しかし、私はそれらを一緒に働かせる方法を理解できません。

コード（アニメーション2011年9月18日に更新）石造のためのウェイポイント

$(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); 
}); 

コード

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

私は石積みの無限スクロールの例を見てきましたが、私はできないために私のページで無限のスクロールが動作するようにしてください（これが私がWaypointを使って始めた理由です）。

問題は、divがWaypointで読み込まれたときに、それらがMasonryを介してグリッドに正しく位置合わせされないことです。このすべての上に、rel =タグはロードされたオブジェクト上でネゲートされます（また、ツールチップスクリプトを使用してhtmlツールチップを作成します）。

基本的に、私は何を探していますか：[1]ウェイポイント経由でロードされ、新しくロードされたウェイポイントdivs でグリッドレイアウトを更新します。上記のツールチップの問題のように、divからのデータをそのまま維持します（適切に起動します）。問題の例は、http://regchan.org/ib/dev/に直接見ることができます。 （ページは最初に4つのdivを最初にロードするように設定されています（最初の4つです）。その後、次のページ（該当する場合）から4をロードして使用できなくなるまで設定します。 #masonは動的に作成されたコンテンツを囲むセレクタdivです。 （それはデータをつかんされていませんが）

EDIT は、一緒に何かを石造サイトから無限スクロールのコードを見ていた、とステッチ：

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); 
}); 
} 
} 
); 

Firebugのは、のためにすべてのエラーを投げていませんそれは、しかし、。ここで

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>