砌体和重叠 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);
        }
    });
}