Masonry reattivo Esempio di layout jQuery

Question

Qualcuno può suggerire come questo sito utilizza il plugin jQuery Masonry per il suo layout fluido e reattivo?

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

Specificamente

;

Il numero di colonne cambia da 3 a 2 a 1 sul ridimensionamento del browser, che è quello che ci si aspetta da un sito che utilizza la muratura, ma ciò che è interessante è che le colonne vengono ridimensionate per riempire sempre l'intera larghezza disponibile. La maggior parte degli altri siti di massoneria ho visto lasciare spazi vuoti alla destra delle colonne mentre il numero di colonne cambia (ad esempio http://masonry.desandro.com/) OPPURE le colonne occupano l'intera larghezza ma il numero di colonne rimane uguale (http://masonry.desandro.com/demos/fluid.html). Stanno impostando in modo dinamico il numero di colonne sul ridimensionamento del browser combinato con le query multimediali CSS o forse stanno usando le colonne CSS3?

Grazie.

Answer 1

Questo è il codice che stiamo guardando.

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

L'idea di base sembra essere quella di aggiungere un columnelector che scopre quante colonne possono essere impostate. Il secondo passo è utilizzare smartresize event nella funzione. Terzo passo è chiamare la muratura con la larghezza "dinamica" delle colonne. Buon divertimento :)