我正在构建一个需要 pinterest 风格主页的网站。（但只有 3 列宽使用 col-lg-4 引导类折叠到 2 列然后 1 列）。
我已经搜索并找到了许多有关如何执行此操作的选项。然而，
我不想在我的 css 中指定列宽（我希望它继承引导列宽）
我不想使用新的 css3 列布局（因为缺乏旧版浏览器支持）
我不想在 PHP 中这样做，因为它以错误的顺序堆叠。
我已经改编了一些取自https://gist.github.com/justincarroll/5959773的代码，它使用砖石来推动块并非常接近我想要的，除了当它堆叠时，它似乎没有工作以及正常的引导行 + col 跨度堆栈。
我希望它可以堆叠以及引导程序可以堆叠，（动态增加和减少列大小）并且我希望它将内容居中居中（目前它堆叠并将所有框推到更小的左侧屏）。
我并不担心如何实际设置盒子的样式......这不属于这个问题的范围，我只需要关于如何推/拉盒子的帮助，这样它们才能很好地工作并调整大小！
我是 css 和 js 的菜鸟，所以如果您对如何改进此代码有任何建议，请告诉我。
Ps：在我的小提琴中，它似乎没有下降到 2 列，但在我的本地主机上，我让它工作了......不知道我在哪里搞砸了。
在这里摆弄它：http: //jsfiddle.net/rDdcT/
下面的代码
<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;
}