Макет стиля 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;
    }

Ответы на вопрос(2)

Ваш ответ на вопрос