Question

I’m using masonry for layout.

I have set up a filter for the divs using the following code:

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

when I select an item, I want masonry to reload the layout so that the items are reshuffled and that there aren’t blank spaces.

Ideas?

thanks

Answer 1

It appears that Masonry won’t reorganize the layout unless the .box is removed from the layout. So you can either remove the box completely or append it into a hidden div.

I wasn’t sure how you wanted the script to function, so I made a demo with a logo and reset button. If you run the script more than once you’ll notice that all the hidden divs were appended to the end of the layout so you won’t see much changing at the top.

Check out the demo here (Note: the bin will not function properly at times, just hit the [ Run ] button again and it should work)

New HTML

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

Script

$(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);
 })

})