Question

我遇到了与砌体有关的奇怪问题。我正在使用无限滚动，当图像被加载时，它们被附加两次。添加更多页面后，我今天发现了问题。我真的不确定是什么导致它，但我认为它与我的jQuery代码有关。我的代码如下。

(function(){

//masonry
$(function() {
    var container = document.querySelector('.post_container');
    var msnry = new Masonry( container, {
        // options
        itemSelector: '.post'
    });
});

//images loaded
var $container = $('.post_container');
$container.imagesLoaded(function(){
    $container.masonry({
        itemSelector : '.post'

    });
});

$('.container').infinitescroll({
        navSelector  : "div.pagination",
        // selector for the paged navigation (it will be hidden)
        nextSelector : "#next a",
        // selector for the NEXT link (to page 2)
        itemSelector : '.post',
        // selector for all items you'll retrieve

        loading: {
            finished: undefined,
            finishedMsg: "<em>Congratulations, you've reached the end of the internet.</em>",
            msg: null,
            msgText: "<em>Loading the next set of posts...</em>",
            selector: null,
            speed: 'fast',
            start: undefined
        }
    }, //callback to make the all work together
    function(newitems) {
        $container.append(newitems);
        imagesLoaded(newitems, function(){
            $container.masonry('appended', newitems);
            $container.masonry('layout');
        });
    });

我加倍检查了我的HTML，甚至删除它并一次检查每个图像。由于某种原因，该插件将图像附加两次。

Answer 1

可能与此有关

function(newitems) {
    $container.append(newitems);  // appending the same thing
    imagesLoaded(newitems, function(){
        $container.masonry('appended', newitems); // appending the same thing
        $container.masonry('layout');
    });
});

我不熟悉砌体，但也许这就是为什么它会追加两次。

图片在Masonry中被追加两次

1 个答案: