Arrange Div elements stacked next to other - Pinterest or Pose style

Question

I would like to implement the style used or followed for images/div arranged next to other in sites like Pinterest or Pose no matter what their individual resolution is. I have tried arranging div next to each other like this

<div id="mainContainer">
<div class="sameHeightDiv"></div>
<div class="sameHeightDiv"></div>
<div class="differentHeightDiv"></div>
<div class="sameHeightDiv"></div>
<div class="sameHeightDiv"></div>
<div class="sameHeightDiv"></div>
<div class="sameHeightDiv"></div>
<div class="sameHeightDiv"></div>
</div>

Css:

#mainContainer { width:800px; }
.sameHeightDiv{ float: left; width: 100px; height:190px; } 
.differentHeightDiv { float: left; width: 100px; height:225px; }

Which is arranged like

1 2 3 4
      5
6 7 8

Because 3'rd Div (.differentHeightDiv) height is greater, i know things will work if all heights are equal but i want a solution if its unequal (i mean if each div has different resolutions/aspect ratios) Some one please help me on this.

Thanks.

Answer 1

Here is a nice tutorial on the basic's behind achieving the pinterest layout http://benholland.me/javascript/how-to-build-a-site-that-works-like-pinterest/