不同高度的缩略图：我得到的行为是否正确？

Question

我正在使用bootstrap创建一个具有不同高度的div thumbnails网格。代码遵循这种结构：

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

当然每个thumbnail都有不同的内容，因此我有不同的高度。我得到的是：

如你所见，在第一和第二之间有一个空的反美学，不智能的空心空间。这是正常的吗？我写的代码编写得很好吗？我怎么能避免这种行为？我已经阅读了一个提示，告诉他说正确的做法是每三个缩略图添加一行，然后关闭行并再插入三个缩略图等等。但恕我直言，我认为这不是正确的事情，因为没有任何东西可以堆积，我无法获得bootstrap的魔力。欢迎提出任何建议： - ）

Answer 1

是的，这种行为是预料之中的。您可以使用jQuery Isotope（https://github.com/desandro/isotope）或Masonry等插件来填充白色空间中的图像。

以下是Isotope + Bootstrap缩略图的演示：

http://bootply.com/61482