jQueryプラグイン「jQuery Masonry」を使うことで、各ボックスの高さを揃えなくても自動的に積み重なったレイアウトを作ることができる。
jQuery Masonryは次の公式サイトよりダウンロードする。
http://masonry.desandro.com/
jQuery Masonryの組込みは次のとおり。
<script type="text/javascript" src="http://sample.sakuraweb.com/js/jquery.min.js"></script>
<script src="http://sample.sakuraweb.com/js/masonry.pkgd.min.js"></script>
<script src="http://sample.sakuraweb.com/js/modernizr.custom.40788.js"></script>
<link rel="stylesheet" href="http://sample.sakuraweb.com/css/grid-style.css"/>
<script type="text/javascript">
$(function(){
var container = $('#container');
container.masonry({
itemSelector: '.item',
columnWidth: 230,
isAnimated: !Modernizr.csstransitions
});
});
</script>
</head>
<body>
<!-- #container -->
<section id="content">
<div id="container" class="transitions-enabled clearfix">
<!-- #content -->
<div class="item big-text col_d">Box01<br>
サンプルテキスト サンプルテキスト サンプルテキスト
</div>
<div class="item big-text col2">Box02<br>
サンプルテキスト サンプルテキスト サンプルテキスト
</div>
<div class="item link col_d">
<a href="#">Box03<br><img src="http://www.geocities.jp/img/gridimage/photo01.jpg" width="190" height="278"><br>草花</a>
</div>
<div class="item link col_d">
<a href="#">Box04<br><img src="http://www.geocities.jp/img/gridimage/photo02.jpg" width="190" height="124"><br>トマト</a>
</div>
<div class="item link col_d">
<a href="#">Box05<br><img src="http://www.geocities.jp/img/gridimage/photo03.jpg" width="190" height="124"><br>木の実</a>
</div>
<div class="item link col_d">
<a href="#">Box06<br><img src="http://www.geocities.jp/img/gridimage/photo04.jpg" width="190" height="124"><br>カイワレ</a>
</div>
<div class="item link col_d">
<a href="#">Box07<br><img src="http://www.geocities.jp/img/gridimage/photo05.jpg" width="190" height="124"><br>赤カブ</a>
</div>
<div class="item link col_d">
<a href="#">Box08<br><img src="http://www.geocities.jp/img/gridimage/photo06.jpg" width="190" height="124"><br>料理</a>
</div>
<div class="item link">
<a href="#">Box09<br><img src="http://www.geocities.jp/img/gridimage/photo07.jpg" width="190" height="278"><br>草花</a>
</div>
<div class="item link col_d">
<a href="#">Box10<br><img src="http://www.geocities.jp/img/gridimage/photo08.jpg" width="190" height="124"><br>ちょう</a>
</div>
<div class="item link col_d">
<a href="#">Box11<br><img src="http://www.geocities.jp/img/gridimage/photo09.jpg" width="190" height="124"><br>きのこ</a>
</div>
<div class="item link col_d">
<a href="#">Box12<br><img src="http://www.geocities.jp/img/gridimage/photo10.jpg" width="190" height="278"><br>草花</a>
</div>
</div>
</section>
サンプル
