2010.07.28

便利!指定した個数ごとにブロック要素の高さを同じにするjs

AUTHOR

自分的2010年最大のイベントを今週末に控えてテンションが振り切れそうな今日この頃。←
おはぎのカラオケでおなじみ、某バンド(ドアズの略称を逆から読むと・・・)のライブです。
金曜の夜から夜行バスで埼玉へ旅立ちます。
きっと週明けには燃えカス同然でプスってると思いますが。

さて。今回は、heightLine.jsに次ぐ便利jsを見つけたので紹介します。

複数のブロック要素の高さを揃えてくれるJavaScriptライブラリ「fixHeight.js」

このjsでは私がほしくてたまらなかった機能がついてます。

「指定した個数ごとにブロック要素の高さを同じにする」


要はこんな感じの不満があったわけで。

heightLine.jsは高さを揃えたいボックスの親要素に「heightLineParent」というクラス名を付けると、全部ごそっと最大値の高さに揃えてくれる機能がついています。

ところが、ボックス内の内容量に大幅なバラつき(画像があったりなかったりなど)がある場合、
内容が少量のボックスでも最大値の高さにされるとこれまた不自然です。

そこで、heightLine.jsは揃えたい要素をグループにする機能が付いています。
(グループにしたいボックスに「heightLine-ほにゃほにゃ」とクラス名を付ける)

と・こ・ろ・が デザインの段階でボックス個数が決めうちであればこれで問題ないのですが、
更新作業でこのボックスが増減する場合、いちいちクラスを付けて付け直してって相当めんどうです・・・

そーこーでー このfixHeight.js

ボックス群の親要素に「fixHeightN○」(○には数字が入ります)というクラス名を付けると、
何個ごとにボックスを揃えるかが指定できます。

例の図のように2カラムずつ揃える場合は、「fixHeightN2」となります。

<div class="fixHeightN2">
    <div class="childbox">
    	内容内容内容内容内容内容
    </div>
    <div class="childbox">
    	内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    </div>
    <div class="childbox">
    	内容内容内容内容内容内容内容内容内容内容内容内容
    </div>
    <div class="childbox">
    	内容内容内容
    </div>
</div>

他にも、親の直属の子ボックスでなくても、その子ボックスの中の要素(孫?)同士を揃えることが出来る機能も付いているようなのでこれは便利です!!

複数のブロック要素の高さを揃えてくれるJavaScriptライブラリ「fixHeight.js」

戸田@ドアズ社長ブログ

  • No items
PAGE TOP