Jquery 当div有淡出的onclick时重新加载砌体？

我用砖石做布局

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

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

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

想法

---

谢谢

除非将

.box

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

我不确定您希望脚本如何运行，因此我制作了一个带有

logo

和

reset

按钮的演示。如果多次运行该脚本，您会注意到所有隐藏的div都被追加到布局的末尾，因此在顶部不会看到太多更改

检查（注意：垃圾箱有时不能正常工作，只需再次点击[运行]按钮，它就会工作）

新HTML

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

---

反应很好。不幸的是，它的功能只完成了一半…请看：我添加了一个新类“web”，我希望在选择每个项目时重置它。目前，如果我选择logo，然后选择web，它不会显示任何内容，因为没有任何项目共享这两个类。我正在尝试一种新的过滤技术，但我仍然有同样的问题。如果你不介意看一看-jasondaydesign.com/js/jquery.filterablepack.js，但是，如果我能让你的上述功能发挥作用，我会使用它。我正在尝试几种不同的过滤技术。我还使用easylistsplitter获得一个带有列表过滤的砖石风格布局-不幸的是，过滤器只在第一列工作-请参阅jasondaydesign.com/index2.htmlI刚刚尝试了这个-并且成功了。我会把它和你的比较。我不太明白你做了什么，但我看到它也能工作——但偶尔（多次单击后）一些div会在空间中浮动，而不是正确地重新排列。我觉得我的版本还可以，因为它会重新加载所有版本，然后淡出正确的版本。现在我还有一个问题——如果你看看我的网站jasondaydesign.com——你会看到照片下面有一个切换。不幸的是，切换内容隐藏在其他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);
 })

})