title: jQuery Masonry layout is breaking when window is resized — fluid seamless photo grid
body: <p>I have posted a <a href="http://test.davewhitley.com/not-wp/static_folder/bug.swf" rel="nofollow">video</a> explaining my problem.
  Sorry for the slow frame rate.</p>
  
  <p>When I shrink the window too fast, the Masonry jQuery plugin seems to be too slow to keep up and therefore breaks the layout when the browser is resized too quickly. Some of the items fall below the footer, and it looks obviously wrong.</p>
  
  <p>When I reload the page, as seen in the video, the layout returns to normal.</p>
  
  <p>I think it is a problem is <code>smartresize</code></p>
  
  <p>Here is the demo page:
  <a href="http://test.davewhitley.com/not-wp/isotope_test/index.php" rel="nofollow">http://test.davewhitley.com/not-wp/isotope_test/index.php</a></p>
  
  <p>This page successfully does it:
  <a href="http://tympanus.net/codrops/collective/collective-2/" rel="nofollow">http://tympanus.net/codrops/collective/collective-2/</a></p>
  
  <p>the javascript:</p>
  
  <pre><code>jQuery(document).ready(function($) {
  var CollManag = (function() {
      var $ctCollContainer = $('#ct-coll-container'),
      collCnt = 1,
      init = function() {
          changeColCnt();
          initEvents();
          initPlugins();
      },
      changeColCnt = function() {
          var w_w = $(window).width();
          if( w_w &lt;= 600 ) n = 2;
          else if( w_w &lt;= 768 ) n = 3;
          else n = 4;
      },
      initEvents = function() {
          $(window).on( 'smartresize.CollManag', function( event ) {
              changeColCnt();
          });
      },
      initPlugins = function() {
          $ctCollContainer.imagesLoaded( function(){
              $ctCollContainer.masonry({
                  itemSelector : '.ct-coll-item',
                  columnWidth : function( containerWidth ) {
                      return containerWidth / n;
                  },
                  isAnimated : true,
                  animationOptions: {
                      duration: 300
                  }
              });
          });
          $ctCollContainer.colladjust();
          $ctCollContainer.find('div.ct-coll-item-multi').collslider();
      };
      return { init: init };
  })();
  CollManag.init();
  });
  </code></pre>