jquery - 当div有淡出onclick时重新加载砌体？

Question

我正在使用砖石进行布局。

我使用以下代码为 div 设置了过滤器：

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

当我选择一个项目时，我希望砌体重新加载布局，以便重新排列项目并且没有空格。

想法？

谢谢

Answer 1

除非从布局中删除，否则 Masonry 似乎不会重新组织.box布局。因此，您可以完全删除该框或将其附加到隐藏的 div 中。

我不确定您希望脚本如何运行，所以我制作了一个带有logo和reset按钮的演示。如果您多次运行脚本，您会注意到所有隐藏的 div 都附加到布局的末尾，因此您不会在顶部看到太多变化。

在此处查看演示（注意：bin 有时无法正常运行，只需再次点击 [ Run ] 按钮即可运行）

新的 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);
 })

})