Albañilería Responsive ejemplo jQuery diseño

Question

Puede alguien sugerir cómo este sitio utiliza el plugin jQuery albañilería por su diseño responde, el líquido?

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

Específicamente

;

El número de columnas cambia de 3 a 2 a 1 en el tamaño del navegador que es lo que espera de un sitio que utiliza mampostería, pero lo interesante es que las columnas también cambian de tamaño para llenar siempre el ancho completo disponible. La mayoría de los otros sitios de mampostería que he visto lagunas de licencia a la derecha de las columnas como el número de columnas cambia (por ejemplo http://masonry.desandro.com/) O las columnas llenar el ancho completo, pero el número de columnas fo sigue siendo el mismo (http://masonry.desandro.com/demos/fluid.html). ¿Están configurando dinámicamente el número de columnas en el tamaño del navegador combinado con las consultas de medios de CSS o quizás están utilizando columnas de CSS3?

Gracias.

Answer 1

este es el código que estamos mirando.

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

La idea básica parece ser la de añadir un columnselector la que descubre cómo se pueden establecer muchas columnas. El segundo paso es usar el smartresize event en la función. El tercer paso es llamar a la mampostería con el ancho "dinámico" de columnas. Divertirse :)