如何使Bootstrap缩略图的行为类似于Pinterest上的缩略图？

Question

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

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

我该如何实现？ 谢谢。

Answer 1

在这种情况下，您无法使用带有twitter bootstrap的缩略图来实现，因为缩略图的float:left不能按您希望的那样工作。

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

此图像将更好地说明它：

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

http://jsfiddle.net/YsrtS/

因此，如果我们想要Pinterest布局，则应该使用一些javascript或简单地使用CSS3的new 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;
}

这里有一个示例，说明如何使用这种简单的布局进行操作。 （不是我的）

Answer 2

仅凭Bootstraps浮动布局无法完成​​此操作，因为Miljan建议您需要一个插件。 例如，砌体使div对齐以彼此完美对齐。

这是一路提供帮助的链接： http : //jaxenter.com/tutorial-get-a-tiled-layout-with-jquery-plugins-43514.html

Answer 3

优秀，我与引导程序一起使用并且工作正常。 如果要更改列数，只需更改。

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

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

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

我将230px用作四列大小。