Иногда элементы кладки перекрываются

Question

У меня странная проблема. Иногда post загружается через стек 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); 

Try:

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

Ваш исходный код будет либо уже добавление новых элементов в два раза, или, возможно, метод appended терпел неудачу из-за прохождения в JQuery завернутого сбор элементов.

Использование .toArray() преобразует обернутую jQuery коллекцию в простой массив элементов, который согласно docs является приемлемым форматом аргумента.