Подтвердить что ты не робот

Пример адаптивного масонства jQuery

Может ли кто-нибудь предложить, как этот сайт использует плагин jQuery Masonry для гибкой и гибкой компоновки?

http://tympanus.net/codrops/collective/collective-2/

В частности,

Число столбцов изменяется от 3 до 2 к 1 в размере браузера, что и ожидалось от сайта с использованием кладки, но что интересно, столбцы также изменяют размер, чтобы всегда заполнять всю доступную ширину. Большинство других сайтов масонства, которые я видел, оставляют пробелы справа от столбцов при изменении количества столбцов (например, http://masonry.desandro.com/) ИЛИ столбцы заполнить полную ширину, но число столбцов fo останется таким же (http://masonry.desandro.com/demos/fluid.html). Являются ли они динамически устанавливают количество столбцов при изменении размера браузера в сочетании с CSS-запросами или, возможно, они используют столбцы CSS3?

Спасибо.

4b9b3361

ОТВЕТЫ

Ответ 1

Это код, который мы смотрим.

jQuery(document).ready(function($) {
    var CollManag = (function() {
        var $ctCollContainer = $('#ct-coll-container'),
        collCnt = 1,
        init = function() {
            changeColCnt();
            initEvents();
            initPlugins();
        },
        changeColCnt = function() {
            var w_w = $(window).width();
            if( w_w <= 600 ) n = 1;
            else if( w_w <= 768 ) n = 2;
            else n = 3;
        },
        initEvents = function() {
            $(window).on( 'smartresize.CollManag', function( event ) {
                changeColCnt();
            });
        },
        initPlugins = function() {
            $ctCollContainer.imagesLoaded( function(){
                $ctCollContainer.masonry({
                    itemSelector : '.ct-coll-item',
                    columnWidth : function( containerWidth ) {
                        return containerWidth / n;
                    },
                    isAnimated : true,
                    animationOptions: {
                        duration: 400
                    }
                });
            });
            $ctCollContainer.colladjust();
            $ctCollContainer.find('div.ct-coll-item-multi').collslider();
        };
        return { init: init };
    })();
    CollManag.init();
});

Основная идея состоит в том, чтобы добавить элемент columnselector, который узнает, сколько столбцов можно установить. Второй шаг - использовать функцию smartresize в функции. Третий шаг - вызвать кладку с "динамической" шириной столбцов. Удачи:)