如何使Bootstrap缩略图像Pinterest上的缩略图一样？

Question

我在我的项目中使用Twitter Bootstrap缩略图，但每张照片下的标题长度每次都不同，我希望它们像Pinterest上的这个例子一样填充所有空间：

http://pinterest.com/all/?category=diy_crafts

我怎样才能做到这一点？感谢。

Answer 1

在这种情况下，使用twitter引导程序无法实现缩略图，因为缩略图的float:left将无法正常工作。

float:left始终将下一个缩略图放在布局中最后一个浮点元素的下方，并放在前一个float:left元素元素的右侧。

此图片将更好地解释：

这些元素是缩略图，元素编号5位于第4个元素之下，并且在布局中尽可能地保留。第6个元素被放在第5个元素下面并且尽可能地放置，如果我们放置第7个元素，它将被放置在页面的左侧，第一列和元素6下面。

http://jsfiddle.net/YsrtS/

因此，如果我们想要一个Pinterest布局，我们应该使用一些javascript或者只使用CSS3的新columns属性（但是你将失去与旧浏览器的兼容性）。

简单的布局可能是：

<div id="wrapper">
    <div id="columns">
        <div class="pin">
            <img src="..." />
            <p>
                ...
            </p>
        </div>
     ...

和CSS：

#columns {
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -webkit-column-fill: auto;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -moz-column-fill: auto;
    column-count: 3;
    column-gap: 15px;
    column-fill: auto;
}

.pin {
    display: inline-block;
    padding: 15px;
    padding-bottom: 5px;
}

Here你有一个如何用这个简单的布局做到这一点的例子。 （不是我的）

Answer 2

仅使用bootstraps浮动布局就无法做到这一点，因为Miljan建议你需要一个插件。例如，砌体将div对齐以便彼此完美对齐。

以下链接提供了一些帮助： http://jaxenter.com/tutorial-get-a-tiled-layout-with-jquery-plugins-43514.html

Answer 3

非常好，我使用了bootstrap，工作正常。 如果您想更改列数，只需更改。

#columns {
   -webkit-column-count: 4;
   ...
}

另一点是由于某些图像呈现出不同大小的盒子，因此一个选项是设置为固定大小，因此您将拥有一个同质的界面。

.pin img {
   width: 230px;
   ...
}

我使用230px到四列大小。