Układanie elementów Div ułożonych obok innych - Pinterest lub styl ułożenia

Question

Chciałbym zaimplementować styl używany lub stosowany w przypadku obrazów/div ułożonych obok siebie w serwisach takich jak Pinterest lub Pose niezależnie od ich indywidualnej rozdzielczości. Próbowałem organizowanie div obok siebie jak to

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

który jest umieszczony jak

1 2 3 4 
     5 
6 7 8 

Ponieważ 3'rd Div (.differentHeightDiv) wysokość jest większa , Wiem, że rzeczy będą działać, jeśli wszystkie wysokości są równe, ale chcę rozwiązania, jeśli jest nierówne (mam na myśli, jeśli każdy div ma różne rozdzielczości/proporcje). Ktoś mi pomoże w tym.

Dzięki.

Answer 1

Tu jest ładny samouczek na podstawowych jest za osiągnięcia układ Pinterest http://benholland.me/javascript/how-to-build-a-site-that-works-like-pinterest/

Answer 2

Airbnb właśnie open source infinity.js

Infinity.js jest UITableView na stronie: przyspiesza przewijanie przez długie listy i zapewnia Twoim nieskończonym strumieniom płynność i stabilność dla Twoich użytkowników.

ListView to kontener, który przenosi zawartość zi do DOM na zdarzenia przewijania. ListViews pomaga odmienić czas kosztownych stron w dół (i przewijać płynnie), upewniając się, że nie ma zbyt wielu elementów na ekranie za jednym razem. ListViews excel w pędzeniu do długich list złożonych elementów HTML, gdzie nowa treść jest często dołączana do końca, a istniejąca treść rzadko jest usuwana.

View a demo here