Question

我在使用带有ajax调用的jQuery Masonry插件时遇到了问题。

我有一个过滤功能，从服务器获取一些非常标准的html内容（div，没有图像）：

var searchResults   = $('div#results');

function filter() {

    var text        = 'text';
    var orderby     = 'order';
    var source      = 'source';
    var media       = 'media';
    var format      = 'format';
    var tags        = 'tags';

    var fetchUrl    = '/search/results/ ' + text + '/' + orderby + '/' + source + '/' + media + '/' + format + '/' + tags;


    $.ajax({
            type: "POST",
            url: fetchUrl,
            cache: false,
            data: "after=000000",
            success: function(data){ 

                searchResults.html(data);

                $('#results').masonry({
                  columnWidth: 360, 
                  itemSelector: '.related' 
                });
            }
        });

}

然后在页面加载时调用它，如下所示：

if (searchResults.length > 0) {

    filter();

}

这一切都按预期工作。但是，当我尝试通过点击调用filter()时，它会使内容正常，但砖石不会格式化：

$('nav#view-types a#grid, nav#view-types a#list').click(function() {

    filter();

    return false;

});

由于我在Ajax成功功能中称为砌体并且它正在进行第一次运行，我无法真正看出问题是什么......任何人都有任何想法？

谢谢！

詹姆斯

Answer 1

你需要告诉砌体在ajax加载完成后“重新启动”：

示例：

$( document ).ajaxComplete(function() {
  console.log("Ajax finished"); //remove this if you want, useful for debugging
      $(document).ready(function() {
      $('#content').masonry({
       columnWidth: 260, //change this accordingly
       itemSelector: '.item'
      });
    });
});

Masonry有一个.reload（），但我发现除非你附加或预先添加，否则它并没有真正起作用。要在完全改变内容时调用它，我必须像这样做。

这里可能是一个更好的解决方案：

$(document).ready(function() {
      $('#admin_content').masonry({
       columnWidth: 260,
       itemSelector: '.masonry-item',
       isAnimated:true,
                animationOptions: {
                    duration: 500,
                    easing:'swing',
                    queue :false
               }
      });
    });
$( document ).ajaxComplete(function() {
    $('#admin_content').masonry('reloadItems').masonry();
});

Answer 2

添加完项目后，您需要调用$（'＃results'）。masonry（'reload'）。

jQuery砌成多个ajax调用问题

2 个答案: