Question

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

以下是您可以看到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);
        });
    };

jQuery窗口调整大小函数只调用一次

1 个答案: