2012-01-28 150 views
13

任何人都可以提出這個網站如何使用jQuery Masonry插件作爲響應式流體佈局嗎?響應式砌體jQuery佈局示例

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

具體而言;

瀏覽器調整大小的列數從3更改爲1,這是您對使用砌體的站點的期望,但有趣的是列也調整大小以始終填充可用的全部寬度。我所見過的大多數其他砌體工地都會因列數發生變化(例如http://masonry.desandro.com/)而在列的右側留下間隙,或者列填滿整個寬度,但fo列的編號保持不變(http://masonry.desandro.com/demos/fluid.html)。他們是否動態設置瀏覽器調整大小的列數與CSS媒體查詢相結合,或者他們正在使用CSS3列?

謝謝。

+0

我們不能看到同樣的事情,因爲它不適合我:http://i.stack.imgur.com/08sMz.png我認爲他們只是使用標準砌體的例子與動畫(沒看)。您可以隨時查看源代碼...... – 2012-01-28 17:56:43

+0

奇怪的是,在使用Chrome 17,Safari 5.1.2或Firefox 9.0.1的OS X Lion中,它看起來像這樣; http://cl.ly/DjIr。我查看了源代碼,但無法弄清楚它是如何完成的。 – robflate 2012-01-28 19:29:21

回答

16

這是我們正在查看的代碼。

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。第三步是使用「動態」列寬度調用砌體。玩得開心:)

+1

謝謝some_guy,那是一種享受。我只需要添加一些媒體查詢來設置.ct-coll-item的最大寬度爲600和768. – robflate 2012-02-12 00:16:14

+0

很好的知道它的工作原理。並感謝廣告我注意到它,我也在尋找類似的東西,我想我現在將嘗試並將其實施到我的網站! – 2012-02-12 16:26:49

+0

救了我的屁股:D – PriteshJ 2012-08-26 17:12:36