- David DeSandro: jQuery Masonry

「jQuery Masonry」を使うと雑誌のような段組みのレイアウトを簡単に作成できます。

実際に「jQuery Masonry」を使ったHAPPY*TRAPのブログ記事一覧は、
このような感じになります。


使い方は、「jQuery Masonry」のサイトをご覧いただければすぐにわかりますが、簡単にご紹介します。

1. 「jquery.js」と「jquery.masonry.js」の読み込み、masonryメソッドのコール

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.masonry.js"></script>
<script type="text/javascript">
    $(function(){  
        $('#wrapper').masonry();
    })  
</script>

jquery.masonry.jsのダウンロードはこちらから。

jquery.jsのダウンロードはこちらから。

2. HTMLを作成

<div id="wrapper">
    <div class="box">
        hoge
    </div>
    <div class="box">
        hoge
    </div>
    ・
    ・
    ・
</div>

クラス名「box」のdivブロックを必要な数だけ記述します。

3. CSSで装飾

ここはお好みで。

#wrapper{
	padding:10px;
	background-color:#eee;
}
.box{
	float:left;
	margin:10px;
	background-color:#fff;
}

以上です。

「jQuery Masonry」で利用できるプロパティなどは、
サイトをご確認ください。