küçük resimler: Doğru olan davranış mı?

Question

Farklı yüksekliklerde div thumbnails ızgara oluşturmak için bootstrap kullanıyorum. kod, bu yapıyı takip şeydir: Her thumbnail farklı içeriğe sahip

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

tabii, ben bir sonucu olarak farklı yüksekliklere sahip. Ne elde şudur: Birinci ve ikinci orada boş bir anti-estetik, unsmart içi boş alan arasında

gördüğünüz gibi. Bu normal mi? Yazdığım kod iyi yapılandırılmış mı? Bu davranıştan nasıl kaçınabilirim? Yapacağım en doğru şey, her üç küçük resim için bir satır eklemek, sonra satırı kapatmak ve üç daha fazla küçük resim ve benzeri eklemek olduğunu belirten bir ipucu okudum. Ama IMHO Bunun doğru bir şey olmadığını düşünüyorum, çünkü hiçbir şey yığılmayabilir ve bootstrap'un büyüsünü alamadım. Herhangi bir öneri bölümü hoş geldiniz :-)

Answer 1

Evet, bu davranış bekleniyor. Görüntülerin beyaz boşlukta doldurulması için jQuery Isotope (https://github.com/desandro/isotope) veya Masonry gibi bir eklenti kullanabilirsiniz.

http://bootply.com/61482