Question

我正在使用一些JS在我正在处理的网站上使一些div具有相同的高度。 Flex不会为这个特定的项目工作。

我使用的代码是：

(function() {
    function equalHeights(selector) {
        var maxHeight = 0;
        function calcEqualHeight() {
            var el = $(this);
            maxHeight = el.height() > maxHeight ? el.height() : maxHeight;
        }
        selector.each(calcEqualHeight).height(maxHeight);
    }

    equalHeights($('.level'));
})();

当您重新调整屏幕大小时，除非您刷新，否则计算将关闭。我想知道在浏览器大小改变时是否还有重新加载。

理想情况下，重新计算高度会有好处，而不是用户必须刷新页面才能正常显示。

Answer 1

您可以为窗口resize event添加处理程序。

注意：因为调整大小事件会在大小更改时多次调用，所以debounce建议使用事件处理程序。我已使用示例中文章中的debounce方法。

(function() {
    function equalHeights(selector) {
        var maxHeight = 0;
        function calcEqualHeight() {
            var el = $(this);
            maxHeight = el.height() > maxHeight ? el.height() : maxHeight;
        }
        selector.each(calcEqualHeight).height(maxHeight);
    }

    var $levels = $('.level');

    equalHeights($levels);

     // 10ms after window stops resizing, the equalHeights will be called
    $(window).resize(debounce(function() {
      equalHeights($levels);
    }), 10);
})();

级别列 - 在屏幕更改宽度时重新计算

1 个答案: