Question

当我将AJAX返回的数据附加到我的砌体容器时，它不会拾取已应用于先前加载的项目的网格布局。我正在使用包含在文档就绪函数中的以下代码：

// Masonry
var $container = $('#masonry-container');
$container.imagesLoaded(function () {
    $container.masonry({
        itemSelector: '.grid_4',
        isAnimated: true
    });
});

// AJAX Fotolia Image Search
var morebtn = $('.get-more-results');
var sOffset = 50;
morebtn.on('click', function () {
    var $cst = $('.crrsrch').text();
    $.ajax({
        type: "POST",
        url: "...",
        data: {};
        success: function (data) {
            $container.imagesLoaded(function () {
                $container.append(data);
                $container.masonry('appended', data);
            });
        }
    });
    return false;
});

来自AJAX调用的项目会被追加，但它们没有砌体布局 - 它们会浮动在列表的顶部，而不是显示为附加。数据将附加在标记中。

使用附加的Masonry方法也会抛出错误。我在控制台中收到以下内容：

Uncaught TypeError: Property 'webkitMatchesSelector' of object is not a function
    i
    r._filterFindItemElements
    r._getItems
    r.addItems
    r.appended
    t.fn.(anonymous function)
    (anonymous function)
    doneLoading

除了最后两个（（匿名函数）和doneLoading）之外，其中每一个都与砌体js文件有关。

从使用砌体网站上的方法文档，这应该工作。显然我在这里遗漏了一些东西。

可能有用的额外信息 - - AJAX调用是Fotolia API - 该网站建立在Wordpress 3.5.2上 - javascript文件正在入队

如果有人有任何想法或可以提供一些帮助，我们将不胜感激。

非常感谢提前。

Answer 1

尝试在函数（成功）中声明masonry itemselector，就像我遇到的类似情况一样加载内容，帮助应用$ container.masonry（'reload'）;

例如：

success: function (data) {
        $container.imagesLoaded(function () {
            $container.append(data);
            $container.masonry('appended', data);
            $container.masonry({
              itemSelector: '.grid_4',
           });
             $container.masonry('reload');
        });
    }

Answer 2

function(data){ //append received data into the element $container.append(data).masonry('reloadItems').masonry( 'layout' ); }

试试这个对我有用。

Answer 3

在Masonry上完成重装功能的最佳方法是执行以下步骤：

1 - 制作这样的功能（我们稍后将使用此功能）

function masonriniate() {
      var $container = $('#news');
        // initialize
        $container.masonry({
          itemSelector: '.columns',
        });
    }

2-在您的脚本中，在启动您的ajax调用之前，完全像这样破坏砌体：

$('#news').masonry('destroy');

在你的ajax完成后，使用.ajaxComplete（handler）之类的方法或等待你的ajax调用的任何事件监听器来完成运行这个函数：

window.setTimeout(masonriniate, 500);

请记住，如果您正在进行任何类型的转换或动画，则超时非常重要，只需使超时毫秒超过动画超时

快乐编码

Answer 4

在这里明确解释https://masonry.desandro.com/methods.html#appended你应该在jquery对象中包装你的响应然后追加。更改代码的这一部分。

success: function (data) {
    $container.imagesLoaded(function () {
        var $data = $(data);
        $container.append($data);
        $container.masonry('appended', $data);
    });
}

将解决问题。

jQuery Masonry - AJAX返回的数据在追加后没有拾取砌体网格布局

4 个答案: