クリック時のMasonryプラグインをトリガー/リロードする方法

Question

私は別のタブを持っているので、masonryは隠しアイテムを読み込んでいないので、新しいタブをクリックすると画像が互いに積み重ねられます。タブをクリックしてトリガー石積みで答えましたが、最初のタブを台無しにしないでこれをやり遂げるにはどうすればいいですか？あなたは、ブラウザのサイズを変更するまでは、＃1にcontainer2

1は完璧に動作タブが、タブ2つのスタックの画像 -

現在

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

とタブ2のために、異なるIDと同じで石材を呼び出しますそれを修正して、正常に動作している

Answer 1

はい、次のようonclickのイベントの石工ビューをリロードすることができます -

使用$container.masonry('reload');それはあなたのために働く場合。私の場合、それは仕事ではありませんでした。私はsetTimeout(function(){ $container.masonry() }, 400);を使いました。 setTimeoutの機能を呼び出してください。

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

Answer 2

このようにそれを実行します。

$(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); 

：それとも、あなたは次のように、他のアニメーションの後に再びそれを呼び出すことができます。