html - 如何使 Bootstrap 缩略图表现得像 Pinterest 上的缩略图？

Question

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

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

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

Answer 1

在这种情况下，您无法使用 twitter bootstrap 的缩略图来实现，因为float:left缩略图无法按您的意愿工作。

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

这张图片将更好地解释它：

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

http://jsfiddle.net/YsrtS/

所以如果我们想要一个 Pinterest 布局，我们应该使用一些 javascript 或者简单地使用columnsCSS3 的新属性（但是你会失去与旧浏览器的兼容性）。

简单的布局可以是：

<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

这不是单独使用引导程序浮动布局可以完成的，因为 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 到四列大小。