レベルの列 - 画面の幅が変更されたときに再計算

Question

私は、私が取り組んでいるウェブサイトでいくつかのdivを同じ高さにするためにいくつかのJSを使用しています。この特定のプロジェクトでは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イベントが複数回呼び出されるため、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); 
})();