How to make Bootstrap thumbnail behave like the thumbnails on Pinterest?

问题

I am using Twitter Bootstrap thumbnails in my project, but the length of the caption under each photo is different each time and I want them to fill all the space like this example on Pinterest:

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

How can I achieve this? Thanks.

回答1:

You can't achieve with the thumbnails with twitter bootstrap in this case, because the float:left of the thumbnails will not work as you want.

The float:left always put the next thumbnail just under the last float element in the layout and at the right at the element of the previous float:left elements.

This image will explain it better:

These elements are thumbnails, the element number 5 is just under the 4th element and as left as possible in the layout. The element 6th is being put under the 5th element and as left as possible and if we put a 7th element, it will be put at the left of the page, in the first column and just under the element 6.

http://jsfiddle.net/YsrtS/

So if we want a Pinterest layout, we should use some javascript or simply use the new columns property of CSS3 (but you will lose compatibility with old browsers).

Simple layout could be:

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

and the 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 you have an example of how you can do it with this simple layout. (Not mine)

回答2:

This is nothing that can be done with bootstraps floated layout alone, as Miljan suggested you need a plugin. eg Masonry to align the divs to align perfectly with eachother.

Here is a link with some help along the way: http://jaxenter.com/tutorial-get-a-tiled-layout-with-jquery-plugins-43514.html

回答3:

Excelent, I used with bootstrap and works fine. If you want to change the number of columns just change.

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

another point is due to some images present boxes with different sizes, so one option is to set to a fixed size, so you will have a homogeneous interface.

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

I used 230px to a four columns size.

来源：https://stackoverflow.com/questions/15639991/how-to-make-bootstrap-thumbnail-behave-like-the-thumbnails-on-pinterest

标签

html

css

twitter-bootstrap

thumbnails