Пример макета Responsive Masonry jQuery - PullRequest
Новая
       16

Пример макета Responsive Masonry jQuery

13 голосов
/ 28 января 2012

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

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

В частности;

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

Спасибо.

1 Ответ

16 голосов
/ 11 февраля 2012

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

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();
});

Кажется, что основная идея заключается в добавлении селектора столбцов, который определяет, сколько столбцов можно установить.Второй шаг заключается в использовании события smartresize в функции.Третий шаг - вызвать кладку с «динамической» шириной столбцов.Веселитесь :) 1006 *

...