如何在点击时触发/重新加载 Masonry 插件答案

【问题标题】：how to trigger/reload Masonry plugin on click如何在点击时触发/重新加载 Masonry 插件
【发布时间】：2013-06-03 23:28:16
【问题描述】：

因为我有不同的选项卡，masonry 没有加载隐藏的项目，所以当我单击一个新选项卡时，图像会相互堆叠，我知道这个问题之前已经被问过，并通过单击选项卡用 trigger masonry 回答，但是我如何在不弄乱第一个标签的情况下做到这一点。

目前正在调用 masonry

$(function(){
$('#container').masonry({
// options
itemSelector : '.item',
columnWidth : 260
   });
});`
$(window).load(function(){   $('#container').masonry(); });

标签 2 相同，但 ID 不同 - #container2

标签一完美运行，但标签二堆叠图像，直到您调整浏览器的大小以修复它并正常工作

【问题讨论】：

标签： triggers tabs reload jquery-masonry

【解决方案1】：

这样做：

$(function(){
    $('#container').masonry({
        // options
        itemSelector : '.item',
        columnWidth : 260
   });
});

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

再也不用担心了！或者，您可以在其他动画之后再次调用它，例如：

$('#something').slideDown(600, masonryUpdate);

即使您不这样做，只需单击页面中的任意位置，砌体就会更新。

【讨论】：

这是一个旧的解决方案，但这对我有很大帮助！谢谢！仍然有效！

【解决方案2】：

是的，您可以在 onclick 事件上重新加载砌体视图，如下所示：-

如果适合您，请使用$container.masonry('reload');。就我而言，这是行不通的。我已经使用了 setTimeout(function(){ $container.masonry() }, 400); 。在setTimeout函数中调用masonry。

$(document).ready(function($) {
    var $container = $('#youContainerId');
    $("#TabId").live("click",function(){
        //$container.masonry('reload');
        setTimeout(function(){ $container.masonry() }, 400);
    });
});

【讨论】：