jQueryを使用して列の高さを均等にしようとしています。私のソリューションは、ページの読み込みではうまく機能しますが、ウィンドウのサイズ変更では機能しません。以下のコード:
function equalizeCols(){
var tallest = 0;
var program = $("#programs li");
var blueSpace = $("#programs li .programInfo");
program.each(function(){
var thisHeight = $(this).height();
var imgHeight = $("#programs li img").height();
var leftOver = thisHeight - imgHeight;
if(leftOver > tallest){
tallest = leftOver;
}
});
blueSpace.height(tallest);
}
$(window).load(equalizeCols);
簡単に言えば、これはすべてのリスト項目を繰り返し処理し、最も高い高さを取得してから、すべてのリスト項目をこの高さに設定します。各リスト項目にはパーセンテージ幅があるため、各項目の高さはウィンドウのサイズに応じて変化します。とはいえ、ウィンドウのサイズ変更で機能するにはこれが必要です。私が単純に行う$(window).resize(equalizeCols);
と、高さはすでにロードから設定されているため、リスト項目は成長し続けます。
このコードをウィンドウのサイズ変更で機能するように適応させる方法はありますか?