2016.12.20

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

Category: JavaScript / jQuery

Tags,

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

要素高さ調整関数

//要素高さ調整関数 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);

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

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

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

//使用例
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);
}
});

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

//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 === true) {
listHeight (listElms,2);
} else {
listHeight (listElms,4);
}
$(window).on('load resize orientationchange',function(){
if(spFlg === true) {
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);
}
});
}

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

参考リンク

Category : JavaScript / jQuery