Упорядочить элементы 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 имеет разные разрешения/пропорции). Один из них помогите мне в этом.

Спасибо.

Ответ 2

Airbnb только что открылся infinity.js

Infinity.js - это UITableView для Интернета: он ускоряет прокрутку через длинные списки и сохраняет ваши бесконечные каналы плавными и стабильными для ваших пользователей.

ListView - это контейнер, который перемещает содержимое в DOM и из него событие прокрутки. ListViews помогает сохранить время перерисовки дорогих страниц вниз (и прокрутки гладко), убедившись, что никогда не бывает много элементов на экране за один раз. ListViews превосходит скорость up длинными списками сложных HTML-элементов, где новый контент часто добавляется в конец, а существующий контент редко удаляется.

Просмотрите демо здесь