Question

我在砌筑和无限滚动一起工作时遇到了很多麻烦。我做了我可能做的一切，但仍然没有。我的代码有问题，还是我完全错过了什么？

这是我的代码：

  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.0b2.120519/jquery.infinitescroll.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.2/masonry.pkgd.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.min.js"></script>
<script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>

<script>
$(window).load( function() {
    $('#content').masonry({
        "itemSelector": ".entry",
        "columnWidth": ".grid-sizer",
    });

$container.infinitescroll({
itemSelector : ".entry",
navSelector : "#pagination",
nextSelector : "#pagination a",
loadingImg : "",
loadingText : "<em></em>",
bufferPx : 10000,
extraScrollPx: 12000,
},
// trigger Masonry as a callback
function( newElements ) {
  var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);

});
</script>

Answer 1

您正在加载无限滚动两次（以下代码中的第1和第4个），我没有看到您正在加载jQuery，这应该是第一个。一个jsfiddle将有助于缩小其他问题。

 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.0b2.120519/jquery.infinitescroll.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.2/masonry.pkgd.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.min.js"></script>
<script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>

无限滚动与砌体不兼容

1 个答案: