elementi galleggianti CSS con altezze disuguali sinistra e in alto nella griglia

Question

mi chiedo come posso ottenere l'effetto in figura 1.

Quello che ho ottenuto finora è

.box { display: inline-block; vertical-align: top; width: 100px;}

Questo mi dà il risultato illustrato in figura 2. (Avviso: Sono consapevole che posso fare lo stesso con float: a sinistra)

Il mio codice HTML simile a questa:

<span class="box">A<br><br><br><br></span> 
<span class="box">B<br></span> 
<span class="box">C<br><br><br></span> 
<span class="box">D<br><br><br></span> 
<span class="box">E<br><br><br><br><br><br></span> 
<span class="box">F</span> 
<span class="box">G<br><br><br><br></span> 
<span class="box">H<br></span> 
<span class="box">I<br><br></span> 

Voglio che ogni elemento da galleggiava a sinistra, per quanto possibile, ma intanto galleggiante verso l'alto.

E 'possibile farlo con puro css, o avrò bisogno di qualche javascript?

EDIT:

E 'importante per me che l'intera griglia è posizionato al centro della pagina. Ecco perché utilizzo il display: inline-block. La griglia non dovrebbe anche essere fissata alla pagina perché voglio che si rifletta quando ridimensiono la mia finestra.

Answer 1

È possibile utilizzare la popolare libreria Masonry.

Un plugin di layout dinamico per jQuery Il rovescio della CSS galleggia

Ecco un codice example ...

$('#container').masonry({ 
    itemSelector: '.box' 
}); 

Qui è la sorgente su Github e un colloquio con David Desandro sul podcast Shoptalk.

Per le persone che non utilizzano jQuery, notare che c'è anche Vanilla Masonry che è la versione senza framework.

Suggerimento: Assicurarsi che il contenitore padre abbia la posizione: relativa, quindi tutto il contenuto è associato al contenitore.

Answer 2

Dal momento che si sta già utilizzando jQuery, jQuery in muratura hanno acquistato anche: http://masonry.desandro.com

Answer 3

Beh, se si mira solo a sostenere il browser più moderni, il CSS3 multi-column layout potrebbe aiutare. Un problema con questo approccio è che non manterrà lo stesso ordine, ma puoi giocare con l'ordine in HTML (o Javascript).

Ho aggiunto un contenitore attorno ai tuoi span chiamato #container.

#container { 
    -webkit-column-width: 100px; 
    -moz-column-width: 100px; 
    column-width: 100px; 
} 

jsFiddle Demo