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); 
     }); 
    };