Question

我一直绞尽脑汁试图解决这个问题。我正在使用AJAX调用来填充包含内容的div（包含本地存储的图像和文本的div）。 ajax调用成功执行，但第二行的div与第一行的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);
        }
    });
}

所有内容项目具有相同的130px宽度，但每个项目的高度可以变化多达20到30像素。有没有我错过的东西？我在砌筑网站上尝试过Q＆amp; 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);
        }
    });
}

砌体和重叠的div

1 个答案: