砌体物品有时会重叠

Question

我遇到了一个奇怪的问题。有时通过ajax堆栈/重叠在其间加载。我已经尝试了所有的方法，但没有任何作用。请观看截图。

我的代码是：

    var currentlyloading = false;
    $(document).on("click", ".next a", function (e) {
            e.preventDefault();
        if(!currentlyloading) {
        currentlyloading = true;
            $(this).addClass('loading-icon').removeClass('static').text('LOADING...');
            $.ajax({
                type: "GET",
                url: $(this).attr('href') + '#latest',
                dataType: "html",
                success: function(out){
                    result = $(out).find('#latest .item');
                    nextlink = $(out).find('#pagination a').attr('href');
            $(result).hide();
imagesLoaded( document.querySelector('#latest'), function( instance ) {
  console.log('all images are loaded');
                $('.contentWrap').append(result.fadeIn(300));
            $('.contentWrap').append(result).masonry('appended', result);
            $('.contentWrap').height("+=300");
}); //images loaded
            currentlyloading = false;
                    $('#pagination a').removeClass('loading').text('LOAD MORE');
                    if (nextlink != undefined) {
                        $('#pagination a').attr('href', nextlink);
                    } else {
                        $('#pagination').remove();
                    }
                } //success
            }); //ajax
        } //currentlyloading
   }); //document onclick

Answer 1

我假设.contentWrap是在第一个实例中应用砌体的容器。这是真的，而不是：

$('.contentWrap').append(result).masonry('appended', result);

尝试：

$('.contentWrap').masonry('appended', result.toArray());

你的原始代码要么两次附加新元素，要么appended方法失败，因为传入了jQuery包装的元素集合。

使用.toArray()将jQuery包装的集合转换为一个简单的元素数组，根据docs，这是一个可接受的参数格式。