Упорядочить элементы Div, уложенные рядом с другим - стиль Pinterest или Pose

Я хотел бы использовать стиль, используемый или используемый для изображений /div, расположенных рядом с другими в таких сайтах, как Pinterest или Pose независимо от их индивидуального разрешения. Я попытался организовать div рядом друг с другом, как это

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

Который устроен как

1 2 3 4
      5
6 7 8

Поскольку высота 3'rd Div (.differentHeightDiv) больше, я знаю, что все будет работать, если все высоты равны, но я хочу решение, если оно неравномерно (я имею в виду, если каждый div имеет разные разрешения/пропорции). Один из них помогите мне в этом.

Спасибо.