title: Masonry: Layout isn't triggered when browser is resized
body: <p><a href="http://keebs.com/sandbox" rel="nofollow">Here is the site.</a></p>
  
  <p>When I resize my window, the layout isn't triggered. So after I resize, I have to refresh the browser in order to see the reconfigured layout. I looked through the Masonry docs and found this page which I think describes my problem: <a href="http://masonry.desandro.com/methods.html#bindresize" rel="nofollow">http://masonry.desandro.com/methods.html#bindresize</a></p>
  
  <p><code>$container.masonry('bindResize')</code></p>
  
  <p>However, I'm not sure where I'm supposed to implement it. Below is the code that I'm currently using.</p>
  
  <pre><code>if(jQuery().isotope) {
  
      $container = jQuery('#masonry');
  
      $container.imagesLoaded( function() {
  
          $container.isotope({
              itemSelector : '.item',
              masonry: {
                  columnWidth: $(document).width() &gt; 1035 ? 240 : 320
              },
              getSortData: {
  
                  order: function($elem) {
                      return parseInt($elem.attr('data-order'));
                  }
  
              },
              sortBy: 'order'
          }, function() {
  
              // Isotope Chrome Fix   
              setTimeout(function () {        
                  jQuery('#masonry').isotope('reLayout'); 
              }, 1000);
  
          });
  
  
      }); 
  
      // filter items when filter link is clicked
      $container = jQuery('#masonry');
  
      jQuery('#filter li').click(function(){
  
          jQuery('#filter li').removeClass('active');
          jQuery(this).addClass('active');
  
          var selector = jQuery(this).find('a').attr('data-filter');
  
          $container.isotope({ filter: selector });
  
          return false;
  
      });
  
  
  }
  </code></pre>
  
  <p>Can someone help me out?</p>