この記事は賞味期限切れです。（更新から1年が経過しています）

既知の類似プラグインは多数あるこの課題ですが、ちょっと習作してみました。 横並びにレイアウトされたブロック要素の高さを揃えるライブラリです。

なにをしたいのか

例えば、フロートなどで横並びにした要素があって、それぞれの高さを揃えたい時があります。

こんな感じに。この処理をしてくれるライブラリを書いてみます。

書いてみた物

jQuery.lineUp

使い方

例えばこんな要素があるとして

<div class="items">
    <!-- 異なるコンテンツ量のブロック達 -->
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
</div>

こんなスタイルが当たっているとします。

.items {
    overflow: hidden;
}
.items .item {
    float: left;
    width: 200px;
    ...
}

この .item に対して整列の処理を行いたい場合は次のようにします。

$(".item").lineUp();

オプションを渡して設定ができます。

$(".item").lineUp({
    onResize : false,
    onFontResize : false
});

オプションの詳細や、その他の細かい機能等は README をご参照ください。

また、Ajax等で要素の高さが変わるような場合、 非同期処理のコールバックなどで再度同じセレクタに対してlineUpを実行するとリフレッシュされます。（追記:2013/3/4）

主な特徴

JavaScriptでこの処理を行うにあたって色んなアプローチがあるとは思いますが、 注意してみたのは次のような点です。

行毎に高さを設定する

行毎に最大の高さを求めて、その高さにあわせてheightを更新します。

他の類似ライブラリ等では、行のグループ分けをクラス名で行う物などがありましたが、 今回は自動で行を判定して一行ずつ処理しています。 判定材料には jQuery.fn.position().top を使いました。

ウィンドウサイズ・文字サイズ変更時に自動更新する

これは他のライブラリでも多く実装されていますね。 設定で無効にする事もできます。

script要素のdata-*属性でセレクタを設定する

jquery-lineup.js を読み込んでいるscript要素のdata-lineup-selector属性を設定する事で、 そのセレクタに対してdomreadyのタイミングでjQuery.fn.lineUpを実行します。

<script src="assets/js/jquery-lineup.js" data-lineup-selector=".item-a, .item-b"></script>

これは次の内容と同じ処理をします。

<script src="assets/js/jquery-lineup.js"></script>
<script>
$(function(){
    $(".item-a").lineUp();
    $(".item-b").lineUp();
});
</script>

JavaScriptファイルを連結してミニファイしたりする場合にはちょっとアレですが、 そうでない場合には便利かもしれないのでつけてみたオマケ機能です。

まとめ

車輪の再発明ですね。

私自身、そういうレイアウトを組む必要性にあまり出会ったことはないのですが、 必要になった時にまた実用してみたいと思います。

2013/3/4

バグを見つけたので修正。ついでに非同期処理に関して追記