砌体和重叠div

Question

I've been racking my brain trying to figure this out. I'm using an AJAX call to populate a div with content (divs containing locally stored images and text). The ajax call executes successfully, but the divs on the second row partially overlap the ones on the first row.

Here's the script I've been working with:

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);
        }
    });
}

All of the content items have the same width of 130px but the height of each item can vary by as much as 20 to 30 px. Is there something that I've missed? I've tried the Q&A on the masonry site but to no avail.

Any help would be greatly appreciated.

Thanks!

Answer 1

Write your Ajax function like below:

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);
        }
    });
}