title: Masonry is not working until resize window
body: <p>I have seen this posted a couple of times on here but neither had a solution which has worked. </p>
  
  <p>I am using <strong>jquery masonry</strong> to lay out lots of divs with an image and caption inside.</p>
  
  <p>I have set "height:auto;" for the css of each item in the masonry.
  I expected that once the window has loaded then the masonry would take effect and lay out the content as it should. Unfortunately, it loads with 4 columns but the images are all overlapped in height. If i set the height in <strong>px</strong> for the css then it works, but the website is responsive and I need the height at auto preferably, as I don't want to change the css height through each media query...</p>
  
  <p>Appreciate any help :)</p>
  
  <p>Thanks</p>
  
  <p>The JS code is:</p>
  
  <pre><code>    $(window).load(function()
  {
      var columns    = 4,
          setColumns = function() { columns = $( window ).width() &gt; 700 ? 4 : $( window ).width() &gt; 480 ? 2 : 1 };
  
      setColumns();
      $( window ).resize( setColumns );
  
      $( '#container' ).masonry(
      {
          itemSelector: '.item',
          gutterWidth: 66,
          isFitWidth: true,
          isAnimated: true,
          columnWidth:  function( containerWidth ) { return containerWidth / columns; }
      });
  });
  </code></pre>