Question

我的HTML中有一些DIV，我使用AJAX动态加载。

$("#workPanel").load("ex.html");

我也有一些onclick的静态链接，调用JQUery砌体来洗牌这些动态DIV ..

            $('#filtering-nav li.1 a, li.2 a, li.3 a').click(function(){
               $('#primary').masonry();

                 return false;
              });

$('#primary').masonry({
            columnWidth: 100, 
            itemSelector: '.box:not(.invis)',
            animate: true,
            animationOptions: {
            duration: speed,
            queue: false
            }
        });

第一次加载页面后，洗牌工作正常，但是当更新动态DIV时，洗牌不再起作用。我猜测live（）或bind（）函数需要在某处调用，但我不知道绑定需要在何处和何处完成。请帮帮我。

提前致谢！

Answer 1

以下是将项目动态添加到砌体集合的示例：

http://masonry.desandro.com/demos/adding-items.html

基本上，您需要调用“重新加载”砌体选项。

例如，将jQuery项“newElement”插入#holder div：

jQuery("#holder").prepend(newElement).masonry('reload')

Answer 2

我认为这就是你所追求的：

要再次运行砌体，您需要在.load()完成后进行随机播放，您可以将其作为回调函数运行，如下所示：

$("#workPanel").load("ex.html", function() {
  $('#primary').masonry();
});

Answer 3

您正在加载它：

$('#primary').masonry({
    columnWidth: 100, 
    itemSelector: '.box:not(.invis)',
    animate: true,
    animationOptions: {
        duration: speed,
        queue: false
    }
});

好的，所以你已经定义了砌体选项。现在，在那之后，让我们创建一个函数并绑定一些事件：

var masonryUpdate = function() {
    setTimeout(function() {
        $('#primary').masonry();
    }, 500);
}
$(document).on('click', masonryUpdate);
$(document).ajaxComplete(masonryUpdate);

再也不用担心了！

如何将动态DIV绑定到Jquery Masonry插件？

3 个答案: