Reboot and reboot Freemasonry. Does not work

Question

Masonry Code (v3):

$(function msnry(){ var columns = 3, setColumns = function() { columns = $( window ).width() > 640 ? 3 : $(window).width() > 320 ? 2 : 1; }; setColumns(); $(window).resize(setColumns); // layout Masonry again after all images have loaded var $container = $('#portfoliocontent').masonry(); var msnry; $container.imagesLoaded( function(){ msnry = new Masonry( container, { itemSelector : '.item', columnWidth: function( containerWidth ) { return containerWidth / columns;} }); }); 

My container for masonry (otherwise my portfolio)

 <div id="portfoliocontent" class="portfoliocontainer"></div> 

My goal is to hide all divs with the class "designshwr" that works, however reloading the masonry doesn't work at all.

 $('.engineeringiC').click(function(){ if($('div.item').hasClass('designshwr')){ $('div.item.designshwr').hide('fast'); $('.portfoliocontainer').masonry('reloadItems'); 

}

Any suggestions? I scratched my head last week in a variety of ways to make it work, and I still couldn’t:

Answer 1

I finally solved the problem in it.

 $(function msnry(){ var columns = 3, setColumns = function() { columns = $( window ).width() > 640 ? 3 : $(window).width() > 320 ? 2 : 1; }; setColumns(); $(window).resize(setColumns); // layout Masonry again after all images have loaded var $container = $('#portfoliocontent').masonry(); var msnry; $container.imagesLoaded( function(){ msnry = new Masonry( container, { itemSelector : '.item', columnWidth: function( containerWidth ) { return containerWidth / columns;} }); }); 

var $ container = $ ('# portfoliocontent') .masonry ();

If someone else is facing this problem, it is probably because you applied masonry initialization to your container variable. Now it works fine :)

Answer 2

I faced the same problem. Maybe my solution is inefficient, but whenever I have the optimal solution, so far I have used this. You can try it, hope it helps you too.

 $('.engineeringiC').click(function(){ var $container = $('#portfoliocontent').masonry(); if($('div.item').hasClass('designshwr')){ $('div.item.designshwr').hide('fast'); //$('.portfoliocontainer').masonry('reloadItems'); setTimeout(function(){ $container.masonry() }, 400); }