Макет стиля Pinterest (Bootstrap 3 + Masonary) * финальные твики *
Я создаю сайт, который нуждается в домашней странице в стиле «интереса». (но только 3 столбца в ширину сворачиваются до 2, а затем 1 столбец, используя класс начальной загрузки col-lg-4) .I '
Я искал много вариантов того, как это сделать. Тем не мение,
Я нея хочу указать ширину столбца в моем css (я хочу, чтобы он наследовал ширину столбца начальной загрузки)
Я не хочу использовать новый макет столбца css3 (из-за отсутствия поддержки старых браузеров)
Я не хочу делать это в PHP, так как он складывается в неправильном порядке.
мы адаптировали некоторый код, взятый изhttps://gist.github.com/justincarroll/5959773 который использует кирпичную кладку, чтобы сдвинуть блоки вокруг и приблизился к тому, что я хочу, за исключением того, что когда он складывается, он неКажется, что он работает так же хорошо, как и обычный ряд начальной загрузки + стек диапазонов.
Я хотел бы, чтобы это складывалось так же, как может складываться начальная загрузка (увеличивая и уменьшая размер столбца динамически), и я 'Мне бы хотелось, чтобы содержимое центрировалось по центру (в настоящее время оно складывает и сдвигает все поля влево на меньших экранах) .I '
Меня не волнует, как на самом деле оформить ящики ... это не входит в сферу этого вопроса, мне просто нужна помощь в том, как сдвинуть / вытащить ящики, чтобы они отлично работали и хорошо меняли размер!
Я нуб с css и js, так что если у вас есть предложения по улучшению этого кода, пожалуйста, дайте мне знать.
PS: в моей скрипке это не 'Похоже, что до 2 столбцов, но на моем локальном хосте я получил это на работу ... не уверен, где я облажался.
Возиться с этим здесь:http://jsfiddle.net/rDdcT/
Код ниже
<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>
<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>
<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>
<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>
<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>
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;
}