Расположите элементы Div рядом друг с другом - стиль Pinterest или Позы

Question

Я хотел бы реализовать стиль, используемый или используемый для изображений / div, расположенных рядом с другими на сайтах, таких как Pinterest или Поза независимо от их индивидуального разрешения. Я попытался расположить 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-го Div (.differentHeightDiv) больше, я знаю, что все будет работать, если все высоты равны, но я хочу найти решение, если оно неравное (я имею в виду, если у каждого div есть разные разрешения / соотношения сторон). помоги мне в этом.

Спасибо.

Answer 1

Вот хороший учебник по основам достижения макета интереса http://benholland.me/javascript/how-to-build-a-site-that-works-like-pinterest/

Answer 2

У Airbnb только что открыт исходный код infinity.js

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

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

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