thumbnails with different heights: is the behavior I get correct?

Question

I'm using bootstrap to create a grid of div thumbnails with different heights. The code is something that follows this structure:

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

of course each thumbnail has a different content, and I have different heights as a result. What I obtain is this:

as you can see, between the first and second there's an empty anti-aesthetic,unsmart hollow space. Is this normal? Is the code I'm writing well structured? How could I avoid this behavior? I've read a hint telling that the right thing to do is to add a row every three thumbnails, then close the row and insert three more thumbnails and so forth. But IMHO I think it's not the right thing to do, because nothing could pile up and I couldn't get the magic of bootstrap. Any piece of suggestion is welcome :-)

Answer 1

Yes, that behavior is expected. You could use a plugin such as jQuery Isotope (https://github.com/desandro/isotope) or Masonry to get the images fill in the white space.

Here is a demo of Isotope + Bootstrap thumbnails:

http://bootply.com/61482