Отзывчивая масонство Пример макета jQuery

Question

Может ли кто-нибудь предложить, как этот сайт использует плагин 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?

Спасибо.

Answer 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 event. Третий шаг - вызвать кладку с «динамической» шириной столбцов. Удачи :)