修改jquery重置为浏览器窗口将重新大小

Question

我有一个类似divs的响应式布局，我正在应用jquery，因此所有的div匹配更多内容的高度。但是，如果浏览器窗口要重新调整大小，所有div保持不变，因为页面加载时会使文本脱离div。有没有办法以某种方式继续运行JQuery每次用户调整浏览器窗口？

为了说明我正在努力实现的目标，让我的div在文本内容和属性宽度上表现为（在浏览器窗口rezise上）为普通div。身高：自动;唯一的区别是所有的div都会匹配高度较高的div的高度。

这里是我有什么链接：http://as.sjsu.edu/cf/vaishak/equalizeTest/index.html

这里是Jquery的，我本来要得到最大高度：

<script> 
jQuery(function(){ 
var maxHeight = 0; 
$(".box").each(function(){ 
    if ($(this).height() > maxHeight) { maxHeight = $(this).height(); } 
}); 
$(".box").height(maxHeight); 
}); 
</script> 

下面是更新后的版本仍然无法正常工作当窗口调整大小时。

$(document).ready(function(){ 
    $(window).resize(function(event) { 
     resizeDiv(); 
    }); 
    $(document).ready(function(){ 
     resizeDiv(); 
    }); 
    function resizeDiv(){ 
     var maxHeight = 0; 
     $(".box").each(function(){ 
      if ($(this).height() > maxHeight) { maxHeight = $(this).height(); } 
     }); 
     $(".box").height(maxHeight); 
    } 
    }); 

任何帮助将不胜感激！

Answer 1

你可以忘掉使用JavaScript，这和使用纯CSS：

http://cssdeck.com/labs/ygq5x6k3

<div class="container"> 
    <div>First</div> 
    <div>Second</div> 
</div> 

.container { 
    display: table; /* optional */ 
    width: 100%; /* optional */ 
} 

.container div { 
    display: table-cell; 
} 

它的弹性，并且与许多“栏目工作“如你所需。由于其纯CSS，您甚至可以通过媒体查询为移动设备禁用它。

Answer 2

当然，你可以使用jQuery的.resize()事件记录在这里：http://api.jquery.com/resize/

例如：

$(window).resize(function() { // YOUR CODE HERE });

然后在每次调整窗口大小时，该代码将运行。

这是一个JSFiddle example，它演示了代码的运行时间。

Answer 3

这是事件监听器的用途。你可以把你的代码放到一个函数中，比如说normalizeBoxHeight()，然后在浏览器调整大小时（并且在开始加载时）调用它。

是这样的：

jQuery(function(){ 

    var normalizeBoxHeight = function(){ 
     var maxHeight = 0; 
     $(".box").each(function(){ 
      if ($(this).height() > maxHeight) { maxHeight = $(this).height(); } 
     }); 
     $(".box").height(maxHeight); 
    } 

    $(window).resize(normalizeBoxHeight); 
    normalizeBoxHeight(); 

});