商品一覧ページなどで、一行あたり複数列のレイアウトをおこなう場合に、各ボックスが画像や文字数によって高さが揃わないことはよくあるよね。

この各ボックスの高さを「一行ずつ」または「全て」のいずれかで揃えてくれるjQueryプラグインが「tile.js」。
プラグイン用のjsファイル1枚を読み込み、数行のスクリプトを添えるだけで簡単にボックスごとの高さを揃えることが出来る。

インストール方法

公式サイトhttp://urin.github.io/jquery.tile.js/へアクセスし、下部にある「Download Compressed」をクリックし、jquery.tile.min.jsというファイルをダウンロード。

記述方法

対象のHTML

[html]


<ul class="list">
	<li class="item">●</li>
	<li class="item">●</li>
	<li class="item">●</li>
</ul>

上記の.itemのボックスの高さを揃える場合、ダウンロードしたファイルをjQueryの本体ファイルのあとに読み込ませ、そのあと専用のコードを記述する。たったこれだけ。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<script src="jquery.tile.min.js"></script>
<script>
$(function(){
    $('.item').tile();
});
</script>

上記のコードは一番標準の書き方。もし、「1行が3列だから3つずつボックスの高さを揃えたい」のであれば、tile()に数を渡してあげれば簡単に任意の数ごとの高さが揃えられる。


$(function(){
    $('.item').tile(3);
});

ちなみに、揃えるボックス内に画像がある場合は『ブラウザが画像サイズを確保する前にスクリプトが実行され』て高さがちゃんと揃わないことがある。
なので、画像がある場合は以下のようにブラウザが画像サイズを取得してから実行するようにする。これ、ホントによくあるケース。


$(window).load(function() {
	$('.item').tile(3);
});

基本は上記2つのいずれかで事足りると思うんだけど、ページ内に親要素が別々の.itemという要素があった場合は親要素をまたがってへんな個数で高さ揃えが発動することがある。この場合は、『それぞれの親要素』ごとに独立させて実行するよう制御する。こんな感じに。


$(function(){
	$('.list').each(function(){
		$(this).find('.item').tile(3);
	});
});

基本、複数列のデザインだった場合にまずこのプラグインが頭に浮かぶけど、高さを揃えずにタイル状(またはレンガ状)に隙間なく詰めて揃えるタイプの配置の場合は、「masonry.js」がオススメ。