miniatury o różnych wysokościach: czy zachowanie jest prawidłowe?

Question

Używam bootstrap do utworzenia siatki o rozmiarze div thumbnails o różnych wysokościach. Kod jest czymś, co następuje tę strukturę:

<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> 

oczywiście każdy thumbnail ma inną treść, i mam różne wysokości w wyniku. Co mogę uzyskać to:

jak widać, pomiędzy pierwszym i drugim nie ma pustej anty-estetycznej, unsmart pustej przestrzeni. Czy to normalne? Czy dobrze napisany kod piszę? Jak mogę uniknąć tego zachowania? Przeczytałem podpowiedź, że najlepiej jest dodać wiersz co trzy miniatury, a następnie zamknąć wiersz i wstawić jeszcze trzy miniatury i tak dalej. Ale IMHO uważam, że nie jest to właściwe, ponieważ nic nie mogło się zmnożyć i nie mogłem uzyskać magii bootstrap. Wszelkie sugestie są mile widziane :-)

Answer 1

Tak, to zachowanie jest oczekiwane. Możesz użyć wtyczki, takiej jak jQuery Isotope (https://github.com/desandro/isotope) lub Masonry, aby obrazy wypełniły białą przestrzeń.

Oto demo miniatur Izotop + Bootstrap:

http://bootply.com/61482