Thumbnails mit verschiedenen Höhen: Ist das Verhalten ich richtig?

Question

Ich verwende Bootstrap, um ein Raster von div thumbnails mit verschiedenen Höhen zu erstellen. Der Code ist etwas, das diese Struktur folgt:

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

natürlich jeder thumbnail einen anderen Inhalt hat, und ich habe verschiedene Höhen als Ergebnis. Was ich bekomme, ist dies:

wie Sie sehen können, zwischen dem ersten und den zweiten gibt es einen leeren anti-ästhetisch, unsmart Hohlraum. Ist das normal? Ist der Code, den ich schreibe, gut strukturiert? Wie könnte ich dieses Verhalten vermeiden? Ich habe einen Hinweis gelesen, dass es richtig ist, alle drei Miniaturansichten eine Zeile hinzuzufügen, dann die Zeile zu schließen und drei weitere Miniaturansichten einzufügen usw. Aber ich denke, es ist nicht das Richtige, denn nichts könnte sich anhäufen und ich könnte die Magie von bootstrap nicht bekommen. Jede Anregung ist willkommen :-)

Answer 1

Ja, dieses Verhalten wird erwartet. Sie können ein Plugin wie jQuery Isotope (https://github.com/desandro/isotope) oder Masonry verwenden, um die Bilder in den Leerraum zu füllen. Hier

ist eine Demo von Isotopen + Bootstrap Thumbnails:

http://bootply.com/61482