title: Masonry run's late in page render
body: <p>I've played around with this a lot, and have used Masonry on a bunch of projects. I am stumped.</p>
  
  <p>I have the containing element CSS set to:</p>
  
  <pre><code>#content.video-grid {
      margin: 0 auto;
      overflow: hidden;
  }
  </code></pre>
  
  <p>With each brick given this CSS:</p>
  
  <pre><code>.grid-block {
      float: left;
      height: 220px;
      width: 240px;
      overflow: hidden;
      padding: 0 0 20px 0;
  }
  </code></pre>
  
  <p>And Masonry called like this:</p>
  
  <pre><code>    jQuery('#content.video-grid').masonry({
          itemSelector : '.grid-block',
          columnWidth : 240,
          isAnimated: true,
          isFitWidth: true,
          gutterWidth: 2
      });    
  </code></pre>
  
  <p>This should result in no "shuffling" of the bricks after the page is loaded, but for some reason it waits until everything is loaded, then it applies the width to the containing element as dictated by isFitWidth.</p>
  
  <p>Here it is not working:
  <a href="http://dev.massmarket.tv/work/all/" rel="nofollow">http://dev.massmarket.tv/work/all/</a></p>
  
  <p>Here is the same implementation working:
  <a href="http://www.caviarcontent.com/los-angeles/" rel="nofollow">http://www.caviarcontent.com/los-angeles/</a></p>
  
  <p>So there must be something that is causing Masonry to run late, but I have been unable to figure it out. Just to be clear, I want Masonry to run BEFORE the images are loaded, so that the bricks are in the correct place before the images are loaded.</p>
  
  <p>Thanks!</p>