Masonry reload & reloadItems not working

javascript, jquery, jquery-masonry

Solution

I finally resolved the issue in it's entirety.

$(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 anyone else encounters this problem it's probably because you applied the masonry initialization to your container variable. It's working great now :)

Problem

The masonry (v3) code: ``` $(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 masonry container (aka my portfolio) ``` <div id="portfoliocontent" class="portfoliocontainer"></div> ``` My goal here is to hide all the divs with the class 'designshwr' which works, however the reload of masonry isn't working at all. ``` $('.engineeringiC').click(function(){ if($('div.item').hasClass('designshwr')){ $('div.item.designshwr').hide('fast'); $('.portfoliocontainer').masonry('reloadItems'); ``` } Any suggestions? I've been scratching my head for the past week at different ways to get it to work, and I still haven't gotten any luck on it :(

Original source