jQueryプラグインjquery.tile.jsで横並びの要素の高さをそろえる

横並びの要素の高さがバラバラの場合、表示崩れの原因になることがしばしばあります。
テーブルにしてしまえば楽なのですが、要素をfloatさせてレスポンシブ対応していたり要素数を動的にしている場合などは、一筋縄ではいきません。

そのような場合はjQueryプラグイン「jquery.tile.js」が便利です。
jquery.tile.js Demo page

上記のデモページを見れば分かりますが、例えば以下のようなコードの場合、

.sample{
	clear: both;
}
.sample p{
	float: left;
}

<div class="sample">
<p><img src="sample-height-100.jpg"></p>
<p><img src="sample-height-200.jpg"></p>
<p><img src="sample-height-100.jpg"></p>
<p><img src="sample-height-300.jpg"></p>
<p><img src="sample-height-100.jpg"></p>
...
</div>

回り込む要素の画像の高さがバラバラのため、そのまま要素が増え続ければレイアウトが崩れる可能性があります。
そこでjQueryと「jquery.tile.js」を読込み以下の処理を実行すれば、横並びの要素の中で最も高いheightを探し出し、全ての要素にその高さを適応させてレイアウトを揃えます。
高さが100px～300pxの画像がバラバラと並んでいる場合、全てのpタグのスタイルに「height:300px」を適用させます。

$('.sample p').tile();

また、4つ毎に折り返し「4つ単位で高さを揃えたい」場合には、以下のようにすればよいです。

$('.sample p').tile(4);

実行するタイミングの注意点

「jquery.tile.js」のソースを直接みてもわかるとおり、非常に軽量で有効なプラグインですが、実行するタイミングが重要です。
先ほどの例のように画像を含む要素の高さをそろえる場合、画像をロードする前にスクリプトが実行されてしまうと、各々の要素の高さを正しく取得することができずに、誤った高さを適応させてしまい、逆に大きな崩れの原因となる場合があります。

以下のコードだと、画像が読み込まれる前にスクリプトが実行される可能性があります。

$(document).ready(function(){
	$('.sample p').tile();
});

そこで、以下のように記述することで、画像が全て読み込まれた後にスクリプトを実行させ、正しく処理することができます。

$(window).load(function(){
	$('.sample p').tile();
});

自前のスクリプト

実は、私はこのプラグインを知るまでは、自前で同様の処理を書いていました。

var h = 0;
$('.sample p').each(function(){
	if(h < $(this).height()){
		h = $(this).height();
	}
});
$('.sample p').css('height', h+'px');

考え方としては一緒で、よりシンプルなコードです。
これはこれで、プラスアルファギミックな処理のケースで活用できると思うので、ここにメモとして置いておきます。