I'm building a site that needs a pinterest style home page. (but only 3 columns wide collapsing down to 2 and then 1 column using the col-lg-4 bootstrap class).
I've searched and found many options of how to do this. However,
I don't want to specify column widths in my css (I want it to inherit the bootstrap column widths)
I dont want to use the new css3 column layout (for lack of older browser support)
I dont want to do it in PHP as it stacks in the incorrect order.
I've adapted some code taken from https://gist.github.com/justincarroll/5959773 which uses masonry to push the blocks around and gotten pretty close to what I want, except that when it stacks, it doesn't seem to work as well as normal bootstrap row + col span stack.
I'd like it to stack as well as bootstrap can stack, (increasing and decreasing the column size dynamically) and I'd like it to center the contents in the middle (currently it stacks and pushes all the boxes to the left on smaller screens).
I'm not worried about how to actually style the boxes... thats not part of the scope of this question, I just need help on how to push / pull the boxes around so that they work great and resize well!
I'm a noob with css and js, so if you have any suggestions on how to improve this code please let me know.
Ps: in my fiddle it doesn't seem to go down to 2 columns, but on my local host I got that to work... not sure where i screwed it up.
Fiddle with it here: http://jsfiddle.net/rDdcT/
Code below
<body>
<div class="container">
<div id="pin-outer">
<div class="col-lg-4 pin pin-inner"> <a href="/">
<img src="http://www.placehold.it/300x400&text=ONE" class="img-responsive">
<p class="post-title">Title One</p>
<p class="post-snippet">
This is a post about title one.
</p>
</a>
</div>
<div class="col-lg-4 pin pin-inner"> <a href="/">
<img src="http://www.placehold.it/300x400&text=TWO" class="img-responsive">
<p class="post-title">Title TWO</p>
<p class="post-snippet">
This is a post about title two.
</p>
</a>
</div>
<div class="col-lg-4 pin pin-inner"> <a href="/">
<img src="http://www.placehold.it/300x400&text=THREE" class="img-responsive">
<p class="post-title">Title three</p>
<p class="post-snippet">
This is a post about title three.
</p>
</a>
</div>
<div class="col-lg-4 pin pin-inner"> <a href="/">
<img src="http://www.placehold.it/300x400&text=ONE" class="img-responsive">
<p class="post-title">Title Four</p>
<p class="post-snippet">
This is a post about title four.
</p>
</a>
</div>
<div class="col-lg-4 pin pin-inner"> <a href="/">
<img src="http://www.placehold.it/300x400&text=FIVE" class="img-responsive">
<p class="post-title">Title five</p>
<p class="post-snippet">
This is a post about title five.
</p>
</a>
</div>
</div>
</div>
</body>
JS
//mutated from https://gist.github.com/justincarroll/5959773
// Load is used to ensure all images have been loaded, impossible with document
jQuery(window).load(function () {
// Takes the gutter width from the bottom margin of .pin-inner
var gutter = parseInt(jQuery('.pin-inner').css('marginBottom'));
var container = jQuery('#pin-outer');
// Creates an instance of Masonry on #pin-outer
container.masonry({
gutter: gutter,
itemSelector: '.pin-inner',
columnWidth: '.pin-inner'
});
// This code fires every time a user resizes the screen and only affects .pin-inner elements
// whose parent class is .container-fluid. Triggers resize so nothing looks weird.
jQuery(window).bind('resize', function () {
if (jQuery('#pin-outer').parent().hasClass('container-fluid')) {
// Resets all widths to 'auto' to sterilize calculations
post_width = jQuery('.pin-inner').width() + gutter;
jQuery('.container-fluid #pin-outer, body > .container-fluid').css('width', 'auto');
// Calculates how many .pin-inner elements will actually fit per row. Could this code be cleaner?
pin - outer_per_row = jQuery('#pin-outer').innerWidth() / post_width;
floor_pin - outer_width = (Math.floor(pin - outer_per_row) * post_width) - gutter;
ceil_pin - outer_width = (Math.ceil(pin - outer_per_row) * post_width) - gutter;
pin - outer_width = (ceil_pin - outer_width > jQuery('#pin-outer').innerWidth()) ? floor_pin - outer_width : ceil_pin - outer_width;
if (pin - outer_width == jQuery('.pin-inner').width()) pin - outer_width = '100%';
// Ensures that all top-level .container-fluid elements have equal width and stay centered
jQuery('.container-fluid #pin-outer, body > .container-fluid').css('width', pin - outer_width);
jQuery('body > .container-fluid').css({
'margin': '0 auto'
});
}
}).trigger('resize');
});
CSS
.pin {
margin: 0 0 50px;
text-align: left;
width: 330px;
}
.pin img {
border-bottom: 1px solid #ccc;
padding-bottom: 15px;
margin-bottom: 5px;
}
.pin p {
font-size : 12px;
color: #333;
margin: 0;
text-decoration: none;
}
.pin:hover {
opacity: 0.4;
text-decoration: none;
}
Is there a particular reason that you need to use col-lg-* ? Because col-lg-* classes treat elements for large screen sizes. You can use the other classes that bootstrap 3 provides like col-md-, col-sm- and col-xs-* to exactly specify how many columns you want in different view port sizes. So if you you want your div to be 4-column wide in large screens you assign col-lg-4 and if you want it to be 6 columns in medium size screens then you would assign col-md-6 class to the same div. Something like this:
<div class="col-lg-4 col-md-6">
</div>
and of course you can use pull and push classes to move your columns around. Bootstrap documentation summarizes this in a table. Hope that helps because I don't know exactly why you just need to use col-lg-4.
HTML
<div class="container container-fluid">
CSS
.pin {
margin: 0 0 0px;
text-align: left;
width: auto;
}
This will let you decide how many columns you want with the bootstrap col-md class. Use col-md-3 for four columns grid and col-md-4 for 3 columns grid.
来源：https://stackoverflow.com/questions/18462853/pinterest-style-layout-bootstrap-3-masonary-final-tweeks