高さが決まっているリストやブロックをfloatで並べるのは簡単ですが、文字数や画像サイズによって高さが成り行きで変化する場合、それぞれのリストやブロックの高さがバラバラになるため、floatを使うとレイアウトが崩れてしまいます。

そんな時は、これからご紹介するjQueryプラグイン「tile.js」が簡単に実装できるのでおすすめです(しかもファイルサイズ1KBと超軽量!)。

jQueryプラグイン「tile.js」の使い方

tile.jsのダウンロード

tile.jsの配布サイトへアクセス。ページ下部にある「Download」を右クリックして、リンク先を保存します(jquery.tile.js)。
tile01

HTML/CSSを記述

例えばこんな感じに「.box」を配置します。

<div class="boxwrap">
	<div class="box">text</div>
	<div class="box">text</div>
	<div class="box">text</div>
	<div class="box">text</div>
	<div class="box">text</div>
	<div class="box">text</div>
	<div class="box">text</div>
</div>

で、「.box」をfloatで左に流れるようにCSSで調整。

.box {
	float: left;
	width: 100px;
}

プラグインの実行

続いて、head内にjQueryライブラリとtile.jsを読み込みます(jQueryライブラリは別途用意)。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.tile.js"></script>

スクリプトを上記コード下、もしくは</body>直前に記述します。以下が一番シンプルな記述方法で、たったこれだけの記述で全ての「.box」の高さを一番高い「.box」に揃えることができます。

<script type="text/javascript">
$(function() {
  $(".box").tile();
});
</script>

tile02-1

または、1行ごとに揃えることもできます。その場合は、以下のように「.tile()」に何個ごとに高さをチェックするかを記述するだけ。画像を見ていただけると分かりますが、各行の高さがその行ごとに(正確には「3要素ごと」に)調節されています。

<script type="text/javascript">
$(function() {
  $(".box").tile(3);
});
</script>

tile02-2

ただ1点だけ注意が必要で、対象内に画像がある場合、その画像の読み込み前にプラグインを実行させてしまうと、高さの値が正常に機能しなくなります。なので、画像がある場合は、jQueryの「load()メソッド」を使ったコードに変更します。

<script>
$(window).load(function() {
 $(".box").tile();
});
</script>

こんな感じで書けば問題なく機能するはずです。