title: pinterest style image layout by using css3 only (including infinite scrolling)
body: <p>I am trying to stack images in a table style, buy it has to be responsive and with infinite scroll.</p>
  
  <p>This means that the images should be in the width between 100px and 200px, and the number of column should fit accordingly.</p>
  
  <p>I have tried using columns (css3) but when adding more images (in infinite scroll), it adds the images to the last column (and not to the bottom row.</p>
  
  <p>So next try was to do float:left; and works well except for the white margin at the right.</p>
  
  <p><strong>Limitations:</strong></p>
  
  <ol>
  <li>No JS  </li>
  <li>CSS3 only is fine Fully responsive (should work when resizing
  the screen) </li>
  <li>Images MUST be cropped and center (this is why I used
  background-image)</li>
  <li>New images must be added to the bottom</li>
  </ol>
  
  <p>Here is a sample code I used <a href="http://jsfiddle.net/SsTZe/9/" rel="nofollow">http://jsfiddle.net/SsTZe/9/</a>:</p>
  
  <pre><code>.imgDiv {
      background-image: url('http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png');
      background-size: cover;
      background-position: center center;
     // min-width: 100px;
     // max-width:200px;
      width:200px;
      height: 100px;
      float:left;
      border:solid 1px;
  }
  </code></pre>