jQuery窗口调整大小功能只调用一次

Question

基本上我有一个无序的图像列表。我使用jQuery来确保所有li标签占用相同数量的垂直空间。但是，我的网站是流动的，我希望我的jquery在页面加载时以及浏览器窗口调整大小时调整li标签的大小。我使用了下面的解决方案，我相信它应该可以工作，并且在阅读其他正在成功完成类似事情的线程之后，我不明白为什么我的代码没有在窗口调整大小时触发。

这里的网站，在这里你可以看到，李标签不与页面调整（除非你刷新）：http://www.webedify.com/sse/type.html

我的HTML：

<ul class="img-results"> 
    <li><a href="#"><img src="img.jpg" alt=""></a></li> 
    <li><a href="#"><img src="img.jpg" alt=""></a></li> 
    <li><a href="#"><img src="img.jpg" alt=""></a></li> 
    <li><a href="#"><img src="img.jpg" alt=""></a></li> 
</ul> 

我的jQuery：

var imght = function() { 
     var maxHeight = -1; 
     $('ul.img-results li').each(function() { 
      maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height(); 
     }); 
     $('ul.img-results li').each(function() { 
      $(this).height(maxHeight); 
     }); 
    }; 

    $(document).ready(imght); 
    $(window).resize(imght); 

我错过了什么？我觉得它很小，可能很明显，我只是没有看到它。谢谢你的帮助。

Answer 1

问题是，一旦指定高度，浏览器调整大小将不再改变高度。高度将保持您指定的高度。在尝试找出新高度应该是什么之前，先删除旧的高度。

var imght = function() { 
     var maxHeight = -1; 
     var uls=$('ul.img-results li'); 
     uls.css({'height':'auto'}); 
     uls.each(function() { 
      maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height(); 
     }); 
     uls.each(function() { 
      $(this).height(maxHeight); 
     }); 
    };