Pinterest样式布局(Bootstrap 3 + Masonary)*最后的tweeks * [英] Pinterest style layout (Bootstrap 3 + Masonary) *final tweeks*
问题描述
我正在建立一个需要pinterest样式主页的网站. (但是使用col-lg-4 bootstrap类，只有3列宽折叠为2，然后是1列).
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,
-
我不想在CSS中指定列宽(我希望它继承自举列宽)
I don't want to specify column widths in my css (I want it to inherit the bootstrap column widths)
我不想使用新的css3列布局(由于缺少较旧的浏览器支持)
I dont want to use the new css3 column layout (for lack of older browser support)
我不想在PHP中执行此操作，因为它以不正确的顺序堆叠.
I dont want to do it in PHP as it stacks in the incorrect order.
我已改编自 https://gist.github.com/justincarroll/5959773 使用砖石结构将块推开，并非常接近我想要的东西，除了它堆叠时，它似乎不像普通的引导行+ col span堆叠那样工作.
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!
我是使用CSS和JS的菜鸟，所以如果您对如何改进此代码有任何建议，请告诉我.
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:在我看来，它似乎没有减少到2列，但是在我的本地主机上，我确实可以使用它……不确定我在哪里弄糟了.
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.
在这里摆弄: 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;
}
推荐答案
HTML
<div class="container container-fluid">
CSS
.pin {
margin: 0 0 0px;
text-align: left;
width: auto;
}
这将使您决定使用bootstrap col-md类需要多少列. 将col-md-3用于四列网格，将col-md-4用于三列网格.
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.
这篇关于Pinterest样式布局(Bootstrap 3 + Masonary)*最后的tweeks *的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
