Layout a tre colonne con blocchi di altezze diverse

Question

Ho un semplice layout a 3 colonne basato su Twitter Bootstrap. L'unico problema è che ogni colonna viene assemblata da un blocco con altezze diverse.

<div class="container"> 
    <div id="blocks" class="row"> 
     <div class="span4"> 
      <div class="block" id="block1"> 
      <div class="block" id="block4"> 
      <div class="block" id="block7"> 
     </div> 
     <div class="span4"> 
      <div class="block" id="block2"> 
      <div class="block" id="block5"> 
      <div class="block" id="block8"> 
     </div>    
     <div class="span4"> 
      <div class="block" id="block3"> 
      <div class="block" id="block5"> 
      <div class="block" id="block9"> 
     </div> 
    </div> 
</div> 

.

Funziona abbastanza bene, ad eccezione di piccoli display. Quindi l'ordine dei blocchi non è ordinato.

C'è qualche modo per ottenere blocchi ordinati senza alcun JavaScript?

Answer 1

Non esiste alcun modo per ottenere questo effetto con la struttura a 3 colonne. Se i blocchi fossero tutti della stessa altezza, si potrebbe galleggiare: lasciato tutti i blocchi senza le colonne, quindi si avvolgerebbero in ordine. Dal momento che non sono della stessa dimensione si dovrebbe utilizzare tale JavaScript come muratura:

http://masonry.desandro.com/

Answer 2

La sua gonna essere abbastanza difficile da raggiungere questo obiettivo, si potrebbe desiderare di giocare con lista unica con float: left; o visualizza: blocco in linea;

o

si può avere 2 set di lista con @media all'interno del CSS, in modo dipendono dalla dimensione dello schermo è possibile visualizzare o nascondere la div selezionato

esempio css

@media screen and (min-width: 768px) and (max-width: 1024px) { 
.displayFullScreen {display: block;} 
.displayMobileScreen {display: none;} 
} 


@media screen and (max-width: 767px) { 
.displayFullScreen {display: none;} 
.displayMobileScreen {display: block;} 
}