砌体和重叠的 div

Question

我绞尽脑汁想弄明白这个问题。我正在使用 AJAX 调用来为 div 填充内容（div 包含本地存储的图像和文本）。 ajax 调用成功执行，但第二行的 div 与第一行的部分重叠。

这是我一直在使用的脚本：

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 像素。我错过了什么吗？我试过砌体网站上的问答，但无济于事。

如有任何帮助，我们将不胜感激。

谢谢！

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

砌体和重叠的 div

Masonry and overlapping divs

css

ajax

jquery

jquery-masonry

masonry