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