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

【问题标题】：jQuery Masonry - AJAX returned data not picking up masonry grid layout after being appendedjQuery Masonry - AJAX 返回的数据在附加后没有拾取砌体网格布局
【发布时间】：2017-05-30 20:27:25
【问题描述】：

当我将 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）之外，每个都与masonry js文件有关。

通过使用砖石网站上的方法文档，这应该可以工作。显然我在这里遗漏了一些东西。

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

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

非常感谢。

【问题讨论】：

我有同样的问题。有谁知道如何解决这个问题？

标签： jquery jquery-masonry

【解决方案1】：

尝试在函数中声明砌体项目选择器（成功），就像在我遇到的类似情况下加载内容一样，帮助应用 $container.masonry('reload');

例如：

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

【讨论】：

谢谢 Tieslog，我会试一试，告诉你进展如何。

【解决方案2】：

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

试试这个它对我有用。

【讨论】：

【解决方案3】：

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

1-制作一个这样的函数（我们稍后会使用它）

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

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

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

3- 在您的 ajax 完成后，使用 .ajaxComplete(handler) 等方法或任何等待您的 ajax 调用完成的事件侦听器运行此函数：

window.setTimeout(masonriniate, 500);

请记住，如果您正在进行任何类型的过渡或动画，超时很重要，只需将超时毫秒数设置为比动画超时时间长

快乐的编码

【讨论】：

【解决方案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);
    });
}

将解决问题。

【讨论】：