title: Messed up layout with isotope in a responsive web design
body: <p>I'm using isotope in a responsive web design at <a href="http://www.gablabelle.com" rel="nofollow">http://www.gablabelle.com</a> and the layout is good on page load but it gets messed up when resizing window. I can't figure out what's wrong after reviewing my script file.</p>
  
  <p>The weird thing is that the layout gets in place at some point.</p>
  
  <p>Please take a look at this video: <a href="http://www.visualise.ca/files/videos/isotope02.mov" rel="nofollow">http://www.visualise.ca/files/videos/isotope02.mov</a></p>
  
  <p>Also added an example at <a href="http://jsfiddle.net/CNb7r/" rel="nofollow">http://jsfiddle.net/CNb7r/</a></p>
  
  <p>I've tried with the two different jQuery scripts</p>
  
  <p>1st)</p>
  
  <pre><code>    var $container = $("#stream");
      var $window = $(window);
      $container.imagesLoaded( function(){
          $container.isotope({
              animationEngine: "best-available",
              itemSelector : "article.post",
              masonry: {
              columnWidth: 300,
              gutterWidth: 30
              },
              onLayout: function(){
                  forceLoad();
                  setTimeout(function(){
                      html_height = $container.height();
                      $("#sidebar").height(html_height - 30);
                  }, 500);
              }    
          });
      });
      $window.smartresize(function(){
          var windowSize = $window.width();
          var masonryOpts;
          // update sizing options 
          if (windowSize &gt; 1199) {
              masonryOpts = {
                  columnWidth: 300,
                  gutterWidth: 30
              };
          } else if (windowSize &lt; 1200 &amp;&amp; windowSize &gt; 979) {
              masonryOpts = {
                  columnWidth: 240,
                  gutterWidth: 20
              };
          } else if (windowSize &lt; 768) {
              masonryOpts = {
                  columnWidth: windowSize / 2,
                  gutterWidth: 1
              };
          } else {
              masonryOpts = {
                  columnWidth: 186,
                  gutterWidth: 20
              };
          }
          $container.isotope({
              masonry: masonryOpts
          }).isotope('reLayout');
      }).smartresize();
  </code></pre>
  
  <p>and the 2nd)</p>
  
  <pre><code>$(window).smartresize(function(){       
          var $windowSize = $(window).width();
          if ($windowSize &gt; 1199) {
              $container.imagesLoaded( function(){
                  $container.isotope({
                      animationEngine: "best-available",
                      itemSelector : "article.post",
                      masonry: {
                          columnWidth: 300,
                          gutterWidth: 30
                      },
                      onLayout: function(){
                          setTimeout(function(){
                              html_height = $container.height();
                              $("#sidebar").height(html_height - 30);
                          }, 500);
                      }       
                  });
              });
          } else if ($windowSize &lt; 1200 &amp;&amp; $windowSize &gt; 979) {
              $container.imagesLoaded( function(){
                  $container.isotope({
                      animationEngine: "best-available",
                      itemSelector : "article.post",
                      masonry: {
                          columnWidth: 240,
                          gutterWidth: 20
                      },
                      onLayout: function(){
                          setTimeout(function(){
                              html_height = $container.height();
                              $("#sidebar").height(html_height - 20);
                          }, 500);
                      }       
                  });
              });
          } else if ($windowSize &lt; 768) {
              $container.imagesLoaded( function(){
                  $container.isotope({
                      animationEngine: "best-available",
                      itemSelector : "article.post",
                      resizable: false,
                      masonry: {
                          columnWidth: $windowSize / 2,
                          gutterWidth: 1
                      },
                      onLayout: function(){
                          setTimeout(function(){
                              html_height = $container.height();
                              $("#sidebar").height(html_height - 30);
                          }, 500);
                      }   
                  });
              });
          } else {
              $container.imagesLoaded( function(){
                  $container.isotope({
                      animationEngine: "best-available",
                      itemSelector : "article.post",
                      masonry: {
                          columnWidth: 186,
                          gutterWidth: 20
                      },
                      onLayout: function(){
                          setTimeout(function(){
                              html_height = $container.height();
                              $("#sidebar").height(html_height - 20);
                          }, 500);
                      }   
                  });
              });
          };  
      }).smartresize();
  </code></pre>
  
  <p>If you disable Javascript, you'll see the responsive CSS is correct (no thumbnails will be displayed, only placeholders).</p>
  
  <p>Any help would be greatly appreciated. Thanks.</p>