Reorganize the entire element after hiding the element using jquery masonry

Question

I hide the face, and by hiding it, there is a space in the html, and I want to reload the masonry and reinstall the contents. I tried .masonry ('reload'), but I did not work. Any help

Violins http://jsfiddle.net/emtBX/1/

Js

$(document).ready(function(){ $('#container').masonry({ // options itemSelector : '.item', columnWidth : 240, isAnimated: true, animationOptions: { duration: 750, easing: 'linear', queue: false } }); $('#butn1').click(function() { $('#container ul li').eq(2).hide(); $('#container').masonry('reload'); }); }); 

Answer 1

You can hide the li element and remove the .item class to change the order of the elements http://jsfiddle.net/emtBX/11/

 $('#container ul li').eq(2) .css({'visibility': 'hidden', 'display': 'none'}) .removeClass("item masonry-brick"); 

Answer 2

jquery masonry has a "hide" method ( http://masonry.desandro.com/methods.html#hide )

use it as follows:

 $('#container').masonry( 'hide', $('#container ul li').eq(2) ).masonry(); 

the last call to masonry () does what you want: reload the tiles

Answer 3

In order to respond to Lewis' comment and give an answer to people looking for a solution in v3, the hidden v3 method no longer exists, you just need to use the jQuery hide () method after starting the masonry layout. So the idea is to hide the elements:

 $('.something-to-hide').each(function(){ $(this).hide(); }); $('.grid').masonry('layout'); //we assume grid is your class use to masonry container. 

Then, to display hidden items:

 $('.class-for-all-elements').show() $('.grid').masonry('layout'); 

In my case, I add to do a search before hide, so I used the each () function.

Stéphane