Responsywny model murarski Przykład układu jQuery

Question

Czy ktoś może zasugerować, w jaki sposób ta strona korzysta z wtyczki jQuery do murowania ze względu na elastyczny i płynny układ?

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

szczególności;

Liczba kolumn zmienia się z 3 na 2 na 1 przy zmianie rozmiaru przeglądarki, czego można się spodziewać po witrynie używającej muru, ale co ciekawe, kolumny zmieniają również rozmiar, aby zawsze wypełniać całą dostępną szerokość. Większość innych witryn murarskich, które widziałem, pozostawia odstępy po prawej stronie kolumn w miarę zmiany liczby kolumn (np. http://masonry.desandro.com/) LUB w kolumnach wypełnia się pełna szerokość, ale liczba kolumn pozostaje taka sama (http://masonry.desandro.com/demos/fluid.html). Czy dynamicznie ustawiają liczbę kolumn przy zmianie rozmiaru przeglądarki w połączeniu z zapytaniami o media CSS, czy może używają kolumn CSS3?

Dzięki.

Answer 1

To jest kod, na który patrzymy.

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

Wydaje się, że podstawową ideą jest dodanie kolumnyselector, która dowiaduje się, ile kolumn można ustawić. Drugim krokiem jest użycie funkcji smartresize event. Trzecim krokiem jest wywołanie muru z "dynamiczną" szerokością kolumn. Baw się dobrze :)