2013-02-15 77 views
2

我想弄清楚如何改變瀏覽器窗口調整大小時,我的流體砌體佈局的columnWidth。因此,當瀏覽器寬度小於1300px columnWidth時從4切換到3
這裏是我的jQuery:jQuery砌體。更新columnWidth調整大小

jQuery(document).ready(function() { 

     jQuery('#thumb-wrap, #thumb-wrap-2').masonry({ 
      itemSelector: '#thumb-container-1, #thumb-container-2', 
      // set columnWidth a fraction of the container width 
      columnWidth: function(containerWidth) { 
      return containerWidth/4; 
      } 

      }); 
    }); 

這是在所有可能的?

回答

1

如何通過窗口大小重新定義?

$(window).resize(function() { 
    $('#thumb-wrap, #thumb-wrap-2').masonry({ 
     itemSelector: '#thumb-container-1, #thumb-container-2', 
     columnWidth: function(containerWidth) { 
      var num = (containerWidth > 1300) ? 4 : 3; 
      return containerWidth/num; 
     } 
    }); 
}); 
+0

非常接近,這個成功地從4減少到3,但是當頁面加載時,石匠不工作,只有當你開始調整窗口大小時,它會卡入到位嗎? – user1374796 2013-02-15 10:25:31

+0

您也可以在page.load事件中使用此功能的內容。順便說一句,我只看了石工選項,並有isResizable(當瀏覽器窗口調整大小時,觸發器佈局邏輯)。你試過了嗎? – alijsh 2013-02-15 10:33:34

+0

我有點工作,當頁面以較小的尺寸被加載時,它仍然不起作用,當屏幕尺寸再次增加並且它返回到4列時,我遇到了問題,媒體查詢不要似乎沒有應用 – user1374796 2013-02-15 14:09:00