title: Masonry imagesLoaded not working
body: <p>I have</p>
  
  <pre><code>&lt;div class="js-masonry" data-masonry-options='{ "columnWidth": 50, "itemSelector": ".item", "gutter" : 20 }'&gt;
        &lt;div class="item"&gt;&lt;a href="/photo/side-portrait"&gt;&lt;img src="/assets/uploads/_default/T96A9589-2.jpg" alt="T96A9589-2" width="909" height="1364"/&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;div class="item"&gt;&lt;a href="/photo/butterfly"&gt;&lt;img src="/assets/uploads/_default/T96A7105-2.jpg" alt="T96A7105-2" width="2046" height="1364"/&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;div class="item"&gt;&lt;a href="/photo/white-shirt"&gt;&lt;img src="/assets/uploads/_default/T96A6883.jpg" alt="T96A6883" width="2046" height="1364"/&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>which works ok with standard masonry functionality, but masonry is trying to do the layout before some of the images loaded so it's looking messed up.</p>
  
  <p>I tried adding</p>
  
  <pre><code>$(function() {
          var $container = $('.js-masonry');
          // initialize Masonry after all images have loaded
          $container.imagesLoaded( function() {
              $container.masonry();
          });
      });
  </code></pre>
  
  <p>But it's not helping!</p>
  
  <p>Is the issue me mixing the data attributes and the js code? Or is it something else i cannot see?
  Any help very gratefully appreciated!</p>
  
  <p>Added - .item css is</p>
  
  <pre><code>width: 49%;
  margin-bottom: 15px;
  </code></pre>