【jQuery】要素の高さを列ごとに揃える関数（レスポンシブ対応）

関数のコードは以下のものをベースにさせていただいております。

JavaScript

elmsに比較する要素、columnsに列の数を設定します。
比較要素はliでもaタグでも何で大丈夫です。
加えて、columnsに設定した数毎にelmsの比較を行うというものなので、横並びになっていなかったり、場所が離れていても比較が可能です。

高さの取得はheight()関数にて行っているので、比較要素にpadding等の設定を入れている場合は、innerHeight()に改変する等の変更が必要かもしれません。

//要素高さ調整関数 elms:比較する要素 columns:列の数
function listHeight(elms,columns) {
	//要素の高さをリセット
	$(elms).css('height', '');
	//設定された列の数が1以下だった場合は処理を停止
	if(columns <= 1) {
		return false;
	}
	//該当する要素の数を取得
	var liLen = $(elms).length;
	//各要素の高さの配列
	var liHiArr = [];
	//行の高さの配列
	var lineHiArr = [];
	var i;
	//要素の高さを取得
	for (i = 0; i <= liLen; i++) {
		liHiArr[i] = $(elms).eq(i).height();
		if (lineHiArr.length <= Math.floor(i / columns) 
			|| lineHiArr[Math.floor(i / columns)] < liHiArr[i]) {
			lineHiArr[Math.floor(i / columns)] = liHiArr[i];
		}
	}
	
	//要素の高さを変更
	$(elms).each(function(i){
		$(this).css('height',lineHiArr[Math.floor(i / columns)] + 'px');
	});
}

//使用例
var listElms = '.hoge li';
listHeight (listElms,3);

レスポンシブに対応させる

複数使用する場合はブレークポイントの判別を１つにまとめてしまう方法もあります。
ブレークポイントの数値も一元管理できるので、他にも記述が増える場合は有効かもしれません。

//使用例
var listElms = '.hoge li';
listHeight (listElms,3);
$(window).on('load resize orientationchange',function(){
	//ブレークポイント
	var spW = 640;
	var winW = window.innerWidth ? window.innerWidth: $(window).width();
	if(winW > spW) { //PCの場合
		listHeight (listElms,2);
	} else { //spの場合
		listHeight (listElms,4);
	}
});

onメソッドの外にも関数を呼び出しているのは、ページLoad完了までの間の崩れ対策です。
関数の呼び出しをif文でくくってあるのは、ページ内にその要素が無い場合の対策なので、確実に存在する場合は不要です。
その場合、listElms と listElms02のコードも１つにまとめてしまうのも良いと思います。

//PC SP判別
var spW = 640; //ブレークポイント
var winW = window.innerWidth ? window.innerWidth: $(window).width(); //ウィンドウの幅を取得
//PC、SPフラグ振り分け
var spFlg = false;
if(winW > spW) {
	spFlg = false;
} else {
	spFlg = true;
}
$(window).on('resize load orientationchange', function(){
	winW = window.innerWidth ? window.innerWidth: $(window).width();
	if(winW > spW) {
		spFlg = false;
	} else {
		spFlg = true;
	}
});
	
//使用例
var listElms = '.hoge li';
if($(listElms).length){
	if(spFlg) {
		listHeight (listElms,2);
	} else {
		listHeight (listElms,4);
	}
	$(window).on('load resize orientationchange',function(){
		if(spFlg) {
			listHeight (listElms,2);
		} else {
			listHeight (listElms,4);
		}
	});
}

var listElms02 = '.hoge li';
if($(listElms02).length){
	if(spFlg === true) {
		listHeight (listElms02,3);
	} else {
		listHeight (listElms02,4);
	}
	$(window).on('load resize orientationchange',function(){
		if(spFlg === true) {
			listHeight (listElms02,3);
		} else {
			listHeight (listElms02,4);
		}
	});
}

• Facebook
• X
• LinkedIn
• はてなブックマーク