投稿日時: 2014年9月21日　カテゴリー: JavaScript・jQuery

jQueryで要素の高さを揃えるプラグインを作ってみた (blockHeight.js)

jQueryで要素の高さを揃えるプラグインを作ってみました。
下記からjsファイルをダウンロードして、htmlに組み込んでください。

→ ダウンロードはこちら

→ デモはこちら

実行方法

<script src="jquery.js" type="text/javascript"></script>
<script src="blockHeight.js" type="text/javascript"></script>
<script type="text/javascript">$('要素名').blockHeight();</script>

要素名には高さを揃えたい要素の親要素(包括要素)を指定してください。

コード解説

$.fn.blockHeight = function() {

　// 指定セレクタを$objに格納
　var $obj = $(this);	

　// htmlを詠み込み終わってから実行
　$(window).load(function(){ def(); });

　function def(){

　　// 指定セレクタの横幅を取得
　　var ObjWid = $obj.width();

　　// 指定セレクタ直下の子要素の横幅を取得
　　var ObjChildWid = $obj.find('> *:eq(0)').width();

　　// 指定セレクタと子要素の横幅を割り算して列数を取得(小数は切捨)
　　var BoxLine = Math.floor(ObjWid/ObjChildWid);

　　// 指定セレクタの個数繰り返す
　　$obj.each(function(index){

　　　// 指定セレクタと子要素を$objに格納
　　　var $obj = $(this).find('> *');

　　　// 子要素の高さを格納しておく配列を宣言
　　　var objHeight = new Array();

　　　// 子要素の個数を取得
　　　var ObjChildCnt = $obj.length;

　　　// 行数(子要素の個数÷列数)繰り返す
　　　for(var i=0; i＜ObjChildCnt/BoxLine; i++) {

　　　　// 行の子要素の高さをobjHeightに格納
　　　　for(var j=0; j＜BoxLine; j++){ objHeight[j] = $obj.eq(i*BoxLine+j).height(); }

　　　　// objHeightの一番高い値を行の子要素の高さに指定する
　　　　for(var j=0; j＜BoxLine; j++){ $obj.eq(i*BoxLine+j).height(Math.max.apply(null, objHeight)); }

　　　}

　　});

　}

};

レスポンシブルの場合

レスポンシブルデザインで画面サイズが変わった時にボックスの高さや列数が変更されるケースは、再度実行しなおすように$(window).load(function(){ def(); }); の下に

$(window).on('resize', function(){ def(); });

を追加してください。