jquery tile.jsでグリッドの高さを揃えます

JSを読み込みます

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/tile.js"></script>
<script type="text/javascript">
$(window).load(function() {
  $(".mod_grid3hBox_inner").tile(3);
});
</script>

HTMl

<div class="mod_grid3hBox">

<div class="mod_grid3hBox_inner">
<h3>タイトル</h3>
<p><img src="Grid_001.gif" width="220" height="132" alt="写真" /></p>
<p class="mod_caption">キャプション</p>
<p>説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。</p>
<!-- mod_grid3hBox_inner_end --></div>

<div class="mod_grid3hBox_inner">
<h3>タイトル</h3>
<p><img src="Grid_001.gif" width="220" height="132" alt="写真" /></p>
<p class="mod_caption">キャプション</p>
<p>説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。</p>
<!-- mod_grid3hBox_inner_end --></div>

<div class="mod_grid3hBox_inner">
<h3>タイトル</h3>
<p>写真とキャプションをとりました。</p>
<!-- mod_grid3Box_inner_end --></div>

<div class="mod_grid3hBox_inner">
<h3>タイトル</h3>
<p>写真とキャプションをとりました。</p>
<!-- mod_grid3hBox_inner_end --></div>

<div class="mod_grid3hBox_inner">
<h3>タイトル</h3>
<p><img src="Grid_001.gif" width="220" height="132" alt="写真" /></p>
<p class="mod_caption">キャプション</p>
<p>説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。</p>
<!-- mod_grid3hBox_inner_end --></div>

<div class="mod_grid3hBox_inner">
<h3>タイトル</h3>
<p>写真とキャプションをとりました。</p>
<!-- mod_grid3hBox_inner_end --></div>

<!-- mod_grid3hBox_end --></div>

CSS

.mod_grid3hBox{
	width:720px;
	margin-right:-20px;
}
.mod_grid3hBox_inner{
	width:220px;
	float:left;
	margin:0 20px 10px 0;
	background-color:#FFFFCC;
}
.mod_grid3hBox_inner h3{
	font-weight: bold;
	font-size: 1.4em;
	border-bottom:double 3px #000;
	margin:0 0 5px 0;
}
.mod_grid3hBox_inner p.mod_caption{
	color:#666;
	padding:0 0 5px 0;
}