Question

我知道很多人已经写过这个，但我觉得我已经接近解决这个问题了。

我正在尝试使用安装了砌体的主题，但现在客户端要求无限滚动，这导致了我的问题。

最初我在控制台中看到了砌体和无限滚动插件的错误，现在至少我只看到了一个砌体错误。它看起来好像无限滚动功能正在调用帖子的后续页面，只是Masonry正在努力将它们添加到正确布局的页面中。

我认为这与我的回调函数有关，但我担心我可能还需要调用一个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也提出了这个问题）。

与tumblr中的Infinite Scroll一起使用时，Masonry插件返回错误

1 个答案: