title: Masonry jquery - not satisfy with the results
body: <p>I'm discovering Masonry and trying to use it for my website.
  The ultimate goal would be to have something as smooth as 500px.com or something similar.
  so far I've played with Masonry and tried to follow the tutorials and the advises of this forum which are very helpful ! - thanks</p>
  
  <p>now this is what I got: <a href="http://www.thejunglemurmurs.com/tags3.php" rel="nofollow">http://www.thejunglemurmurs.com/tags3.php</a>
  But unfortunately it is not as nice as the tutorials and I'm a bit disappointed...
  I was expecting a better filling of the container, now I see a lot of holes.</p>
  
  <p>here is my code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  #container {
  width: 1000px;
  border: 1px solid black;
  }
  .masonryImage {
    float: left;
    background: #BBBBBB;
    border-radius: 5px;
    margin:5px;
    padding:5px;
    width:180px;
  }
  
  .col1{width:180px;}
  .col2{width:280px;}
  .col3{width:380px;}
  .col4{width:480px;}
  .col1 img{max-width:180px;}
  .col2 img{max-width:280px;}
  .col3 img{max-width:380px;}
  .col4 img{max-width:480px;}   }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="container"&gt;
      &lt;?
      $i=0;
  // pics is filled with the number of the picture from SQL
      while (isset($pics[$i])){
         $pic = $pics[$i];
         $j = $view[$i];
         echo "&lt;div class=\"masonryImage col$j\"&gt;&lt;img src=\"http://www.thejunglemurmurs.com/photos/$pic.jpg\" alt=\"\"&gt;&lt;/div&gt;";
         $i++;
      }
      ?&gt;
  &lt;/div&gt;
  &lt;script src="http://www.thejunglemurmurs.com/js/jquery.1.7.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://www.thejunglemurmurs.com/js/masonry/jquery.masonry.min.js"&gt;   &lt;/script&gt;
  &lt;script&gt;
  var $container = $('#container');
  $container.imagesLoaded( function(){
  $container.masonry({
      itemSelector : '.masonryImage'
  });
  });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I would like to know if there is anything I've missed here or if there are some guidelines to fill up properly the container will the pictures (square pictures, ratio between columns...)</p>