2013-02-15 55 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