Disposer les éléments Div empilés les uns sur les autres - Pinterest ou Pose style

Je tiens à mettre en œuvre le style utilisé ou suivie pour les images/div disposés l'un à côté des autres dans des sites comme Pinterest ou Poser quel que soit leur résolution. J'ai essayé d'arranger div uns à côté des autres comme cette

<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; }

Qui est organisé comme

1 2 3 4
      5
6 7 8

Car 3'rd Div (.differentHeightDiv) la hauteur est plus grande, je sais que les choses vont fonctionner si tous les sommets sont égaux, mais je veux une solution si son inégale (je veux dire, si chaque div a différentes résolutions/aspect ratio) Quelques une, merci de m'aider sur ce point.

Grâce.

source d'informationauteur Wesley