Question

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

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

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

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

想法？

感谢

Answer 1

除非从布局中删除.box，否则Masonry似乎不会重新组织布局。因此，您可以完全删除该框，也可以将其附加到隐藏的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);
 })

})

当div有fadeout onclick时重新加载砌体？

1 个答案: