Responsywny układ nierównej wysokości

Question

Od kilku dni staram się owijać głową, jak poradzić sobie z pewnym projektem strony internetowej, ale do tej pory nie byłem w stanie wymyślić żadnych eleganckich rozwiązań.

Aby krótko podsumować projekt, istnieją 3 kolumny kontenerów, w których pojemniki mają nierównomierne (dynamicznie generowane) wysokości, ale o tej samej (płynnej) szerokości. Należy je ułożyć tak, aby były w kolejności numerycznej, przechodząc od lewej do prawej; tj. 1-2-3 w górnym rzędzie, a następnie 4-5-6 w drugim rzędzie i tak dalej.

Teraz, co tak naprawdę popycha mój orzech, próbuje zrobić to porządnie, bez zbytniego niepotrzebnego "pionowego odstępu" pomiędzy pojemnikami. Został utworzony następujący kod mock-up (dostępny także w JSFiddle poniższy kod bloków), aby zilustrować:

HTML

<div class="wrapper" id="wrapper"> 
    <div class="container small" id="container_1">1</div> 
    <div class="container large" id="container_2">2</div> 
    <div class="container small" id="container_3">3</div> 
    <div class="container medium" id="container_4">4</div> 
    <div class="container small" id="container_5">5</div> 
    <div class="container medium" id="container_6">6</div> 
    <div class="container large" id="container_7">7</div> 
    <div class="container medium" id="container_8">8</div> 
    <div class="container large" id="container_9">9</div> 
    <div class="clearfix"></div> 
</div> 

CSS

.wrapper { 
    width: 100%; 
    padding: 5%; 
} 
.clearfix { 
    clear: both; 
} 
.container { 
    display: block; 
    float: left; 
    width: 25%; 
    margin: 2.5%; 
    color: white; 
    font-weight: bold; 
    text-transform: uppercase; 
} 
.small { 
    height: 100px; 
    background: red; 
} 
.medium { 
    height: 150px; 
    background: green; 
} 
.large { 
    height: 200px; 
    background: blue; 
} 

JSFiddle : http://jsfiddle.net/tzikas/MYgNx/

Uwaga: Ponieważ układ kolumn sam w sobie ostatecznie ak do dwóch/jednej kolumny (s) w oparciu o szerokość urządzenia I zawierał prosty przycisk "Toggle layout" w JSFiddle, aby emulować to.

Chciałbym pomóc dowiedzieć się, co następuje:

1. Jak mogę pozbyć się nadmiernego odstępie pionowym pomiędzy, za przykład „1” i „5” lub „2” i " 6 "?
2. Jak ustawić "4" na pozycji pod "1" zamiast pod "3" (a także rozwiązać poprzedni punkt w postaci )?

Korzystnie Chcę rozwiązać ten problem bez manipulacji DOM poprzez wszelkiego rodzaju skryptów, ale jeśli muszę wtedy MooTools jest moja „preferowane trucizną.

Answer 1

jak na swoje wymagania. Można użyć http://masonry.desandro.com/ tego