レスポンシブなメイソンjQueryレイアウトの例

Question

誰でも、このサイトが反応性の高い流体レイアウトのためにjQuery Masonryプラグインをどのように使用しているかをお聞かせください。具体

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

。

ブラウザのサイズ変更で、列の数が3から2に1変わります。これは、masonryを使用しているサイトから期待されるものですが、興味深い点は、列がサイズ変更されて常に利用可能な全幅を満たすことです。私が見た他の多くの石積みのサイトでは、列の数が変わると（たとえば、http://masonry.desandro.com/）、列が幅いっぱいになりますが、列の数は同じままになります（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を追加することです。 2番目の手順は、関数内のsmartresize eventを使用することです。第3のステップは、列の「動的な」幅で石積みを呼び出すことです。楽しんでください:)