要素の高さ揃え height adjustment

要素の高さ揃えを行うライブラリです。
オプションの設定によりフォントの大きさを変更した場合も自動的に揃えるようにすることが可能です。

サンプル

高さ揃えなし

• sample sample sample sample sample
• sample sample
• sample sample sample
• sample sample
• sample sample sample
• sample sample sample sample sample

高さ揃えあり

• sample sample sample sample sample
• sample sample
• sample sample sample
• sample sample
• sample sample sample
• sample sample sample sample sample

ライブラリのダウンロードと設置

「ライブラリのダウンロード」をクリックしてダウンロードしてください。
ライブラリのダウンロード

ダウンロードしたjquery.height-adjustment.jsを任意の場所へ置き読み込みます。
（jQueryの設置および読み込みは、完了もしくは同時作業を行っているものとします。）

<script type="text/javascript" src="jquery.height-adjustment.js"></script>

【JavaScript】

$(function() { $('.sample').heightAdjustment({ adjustedElement : 'li', lineItemsNumber : 3, loopInterval : true }); });

【HTML】

<ul class="sample"> <li>sample sample sample sample sample</li> <li>sample sample</li> <li>sample sample sample</li> <li>sample sample</li> <li>sample sample sample</li> <li>sample sample sample sample sample</li> </ul>

【CSS】

ul.sample { width:441px; } ul.sample li { margin:0 5px 5px 0; padding:10px; border:1px solid #d00; width:120px; display:block; float:left; list-style:none; }

オプション

以下の設定が可能です。

オプション名	初期値	説明
adjustedElement	''	調整する子要素
adjustedInnerElement	''	調整する孫要素
lineItemsNumber	0	カラム数
loopInterval	false	調整を繰り返すか否か（自動的で高さを揃える） true = 繰り返す false = 繰り返さない

$(function() { $('.sample').heightAdjustment({ adjustedElement : 'li', adjustedInnerElement : 'a', lineItemsNumber : 3, loopInterval : true }); });