miniature con altezze diverse: il comportamento è corretto?

Question

Utilizzo il bootstrap per creare una griglia di div thumbnails con altezze diverse. Il codice è qualcosa che segue questa struttura:

<div class="row"> 
    <ul class="thumbnails"> 
     <li class="span4"> 
      <div class="thumbnail"> 
       content here 
      </div> 
     </li> 
     <li class="span4"> 
      <div class="thumbnail"> 
       content here 
      </div> 
     </li> 
     <li class="span4"> 
      <div class="thumbnail"> 
       content here 
      </div> 
     </li> 
    </ul> 
</div> 

naturalmente ogni thumbnail ha un contenuto diverso, e ho diverse altezze come risultato. Quello che ottengo è questo:

come si può vedere, tra la prima e la seconda c'è un anti-estetica, spazio vuoto unsmart vuoto. È normale? Il codice che sto scrivendo è ben strutturato? Come potrei evitare questo comportamento? Ho letto un suggerimento che dice che la cosa giusta da fare è aggiungere una riga ogni tre miniature, quindi chiudere la riga e inserire altre tre miniature e così via. Ma IMHO penso che non sia la cosa giusta da fare, perché nulla potrebbe accumularsi e non ho potuto ottenere la magia di bootstrap. Qualsiasi suggerimento è benvenuto :-)

Answer 1

Sì, questo comportamento è previsto. Potresti usare un plugin come jQuery Isotope (https://github.com/desandro/isotope) o Massoneria per far riempire le immagini nello spazio bianco.

Ecco una demo di miniature Isotope + Bootstrap:

http://bootply.com/61482