Layout reattivo altezza irregolare

Question

Ho cercato di capire come affrontare un determinato design di pagine Web negli ultimi giorni, ma finora non sono stato in grado di trovare soluzioni eleganti.

Per riassumere brevemente il progetto, ci sono 3 colonne di contenitori in cui i contenitori hanno altezze disomogenee (generate dinamicamente) ma le stesse (fluide) larghezze. Devono essere disposti in modo che siano in sequenza numerica andando da sinistra a destra; vale a dire 1-2-3 sulla riga superiore, seguito da 4-5-6 sulla seconda fila e così via.

Ora, ciò che veramente manda in crisi il mio matto sta cercando di rendere questa linea ordinatamente senza un sacco di "spaziatura verticale" non necessaria tra i contenitori. Ho creato il seguente codice mock-up (disponibile anche come JSFiddle sotto il codice a blocchi) per illustrare:

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/

Nota: poiché lo stesso layout di colonna verrà generato fino a due/una colonna (s) in base alla larghezza del dispositivo ho incluso un semplice pulsante "Attiva/disattiva layout" nel JSFiddle per emulare questo.

Quello che vorrei aiuto per capire è la seguente:

1. Come faccio a sbarazzarsi della spaziatura verticale eccessiva tra, per esempio, "1" e "5" o "2" e " 6" ?
2. Come si ottiene "4" per posizionare stesso sotto "1" anziché sotto "3" (mentre si risolve anche il punto precedente )?

Preferibilmente Voglio risolvere questo senza manipolare il DOM attraverso qualsiasi tipo di scripting, ma se devo allora MooTools è mia "veleno preferito.

Answer 1

Secondo le vostre esigenze. È possibile utilizzare per http://masonry.desandro.com/ per questo