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>