jquery - divにフェードアウトonclickがあるときに石積みをリロードしますか？

Question

レイアウトには石積みを使用しています。

次のコードを使用して、divのフィルターを設定しました。

$("#logo").click(function() {
    $(".box").fadeIn();
    $(".box:not(.logo)").fadeOut();
});

アイテムを選択するときに、アイテムが再シャッフルされ、空白がないように、石積みにレイアウトをリロードしてもらいたいです。

アイデア？

ありがとう

Answer 1

.boxをレイアウトから削除しない限り、石積みはレイアウトを再編成しないようです。したがって、ボックスを完全に削除するか、非表示のdivに追加することができます。

スクリプトをどのように機能させるかわからなかったので、ボタンlogoとresetボタンを使用してデモを作成しました。スクリプトを複数回実行すると、すべての非表示のdivがレイアウトの最後に追加されているため、上部で大きな変化が見られないことがわかります。

こちらのデモをご覧ください（注：ビンが正しく機能しない場合があります。[実行]ボタンをもう一度押すだけで機能するはずです）

新しいHTML

<div id="holder"></div>

脚本

$(document).ready(function(){

 $('#main').masonry({
    columnWidth: 100, 
    itemSelector: '.box',
    animate: true
 });

 $('#logo').click(function(){
  $(".box").fadeIn( '300' );
  $('.box:not(.logo)').fadeOut( '300', function(){ 
   $(this).appendTo('#holder') ;
  });
  setTimeout(function(){ $('#main').masonry() }, 400); // calling masonry to reorganize the layout after the all of the animation has occurred.
 })

 $('#reset').click(function(){
  $('#holder').find('.box')
   .hide()
   .appendTo('#main')
   .fadeIn( '300' );
  setTimeout(function(){ $('#main').masonry() }, 400);
 })

})