响应式砌体jQuery布局示例

Question

任何人都可以提出这个网站如何使用jQuery Masonry插件作为响应式流体布局吗？

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

具体而言;

浏览器调整大小的列数从3更改为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。第三步是使用“动态”列宽度调用砌体。玩得开心:)