2

当我将 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 文件正在排队

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

提前谢谢了。

4

4 回答 4

0

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

请记住，如果您正在进行任何类型的过渡或动画，超时很重要，只需使超时毫秒数超过动画超时

快乐编码

于 2014-09-26T23:39:50.863 回答
0

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

试试这个它对我有用。

于 2014-07-07T09:50:06.510 回答
0

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

例如：

success: function (data) {
        $container.imagesLoaded(function () {
            $container.append(data);
            $container.masonry('appended', data);
            $container.masonry({
              itemSelector: '.grid_4',
           });
             $container.masonry('reload');
        });
    }
于 2013-12-31T11:59:57.050 回答
0

在这里清楚地解释了https://masonry.desandro.com/methods.html#appended您应该将响应包装在 jquery 对象中，然后附加。更改这部分代码。

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

将解决问题。

于 2017-05-30T12:27:25.867 回答