Каменная кладка и перекрывающиеся divs

Question

Я пытаюсь понять это. Я использую вызов AJAX для заполнения div содержимым (divs, содержащие локально сохраненные изображения и текст). Ajax-вызов выполняется успешно, но divs во второй строке частично перекрывают те, что указаны в первой строке.

Вот сценарий, я работаю с:

var $allF = $('#allItems'); 

$(document).ready(function() { 

    $allF.imagesLoaded(function() { 
     $allF.masonry({ 
      itemSelector: '.box', 
      isAnimated: true, 
      animationOptions: { 
       duration: 500, 
       easing: 'linear', 
       queue: false 
      }, 
      isFitWidth: true, 
      columnWidth: 10 
     }); 
    }); 

    loadAllItems(); 

}); 

function loadAllItems() { 
    $.ajax({ 
     url: '/Ajax/LoadAllItems', 
     type: 'POST', 
     dataType: 'json', 
     data: { skip: (pageIndex * pageSize), take: pageSize }, 
     success: function (posts) { 
      var items = ''; 
      $.each(posts, function(p, post) { 
       items += 'html removed to keep post short'; 
      }); 

      var $itemBlock = $(items); 
      $allF.append($itemBlock); 
      $allF.masonry('appended', $itemBlock); 
     }, 
     error: function (xhr, ajaxOptions, thrownError) { 
      console.log(xhr.status); 
      console.log(xhr.responseText); 
      console.log(thrownError); 
     } 
    }); 
} 

Все элементы контента имеют одинаковую ширину 130 пикс, но высота каждого элемента может изменяться на целых 20 до 30 пикселей. Есть что-то, что я пропустил? Я пробовал Q & A на кладке, но безрезультатно.

Любая помощь была бы принята с благодарностью.

Спасибо!

Answer 1

Написать свою функцию Ajax, как показано ниже:

function loadAllItems() { 
    $.ajax({ 
     url: '/Ajax/LoadAllItems', 
     type: 'POST', 
     dataType: 'json', 
     data: { skip: (pageIndex * pageSize), take: pageSize }, 
     success: function (posts) { 
      var items = ''; 
      $.each(posts, function(p, post) { 
       items += 'html removed to keep post short'; 
      }); 

      var $itemBlock = $(items); 
      $allF.append($itemBlock); 
      $allF.imagesLoaded(function() { 
       $allF.masonry('appended', $itemBlock); 
      }); 
     }, 
     error: function (xhr, ajaxOptions, thrownError) { 
      console.log(xhr.status); 
      console.log(xhr.responseText); 
      console.log(thrownError); 
     } 
    }); 
}