title: jQuery Masonry: Sorting images
body: <p>I'm using jQuery Masonry for aligning images on my site. All images have the same width but different heights. Depending on which order they are loaded they are placed, well weird.</p>
  
  <p>This is what I get:</p>
  
  <p><img src="https://i.stack.imgur.com/G6zmk.png" alt="What I get"></p>
  
  <p>And this is what I want:</p>
  
  <p><img src="https://i.stack.imgur.com/dxlMP.png" alt="What I want"></p>
  
  <p>Is this something I should fix with jQuery or maybe somehow change the order they are loaded from the server with PHP? Then how?</p>
  
  <p>Code so far:</p>
  
  <pre><code>var $container = $('#imageAlbum');
  
  $container.imagesLoaded( function(){
    $container.masonry({
        itemSelector : '.image'
        columnWidth: 230;
    });
  
  });
  </code></pre>
  
  <p>CSS for the images</p>
  
  <pre><code>.image{
       margin: 10px;
       float: left;
       width: 230px;
  }
  </code></pre>
  
  <p><strong>ADDED</strong></p>
  
  <p>Made a jsFiddle: <a href="http://jsfiddle.net/DXCDv/2/" rel="nofollow noreferrer">http://jsfiddle.net/DXCDv/2/</a></p>