当DIV有淡出的时候重新加载砖石?

似乎砖石结构不会重新组织布局,除非 .box 从布局中删除。因此,您可以完全删除该框,或者将其附加到隐藏的DIV中。

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

退房 demo here (注意:垃圾箱有时无法正常工作,只需再次按下[运行]按钮,它就会工作)

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

})