Question

因为我有不同的标签，砌体没有加载隐藏的项目，所以当我点击新标签时图像堆叠在一起，我知道之前已经问过这个问题并通过单击标签回答触发器砌体，但是如何在不弄乱第一个标签的情况下如何做到这一点。

目前使用

调用砌体

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

和标签2相同，但ID不同 - ＃container2

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

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

即使您没有，只需点击页面中的任何位置，砖石就会更新。

Answer 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);
    });
});

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

2 个答案: