WEB制作のメモ帳

衆トップページ -> WEB制作のメモ帳 -> jquery -> jquery「Masonry」で雑誌のような段組レイアウト

jquery「Masonry」で雑誌のような段組レイアウト

2011-06-01

jquery

jquery「Masonry」で雑誌のような段組レイアウト

このサイトもそうですが画像の大きさや、文字数によってブロック要素の高さや幅が変わり、横並びさせるときれいにレイアウトできない場合があります。
そんな時に要素の大きさに合わせて自動で間隔を詰めてレイアウトしてくれるスクリプトを見つけたのでメモ。

■使用するスクリプト
jquery.min.js
jquery.masonry.js
http://masonry.desandro.com/

■実装サイト
http://www.mogumogusearch.com/

無料ホームページ素材

SOURCE
■HTML

「head」に記述するコード
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="jquery.masonry.js"></script>
<script type="text/javascript">
$(function(){
$('.wrap').masonry();
})
</script>

<div class="wrap">
<div class="box">テキスト</div>
<div class="box">テキスト</div>
<div class="box">テキスト</div>
</div>

■CSS
.wrap {
 width: 640px;
}
.box {
 width:195px;
 margin:5px;
 padding:5px;
 float:left;
 background:#fff;
 border:#ff6f0f solid 1px;
 display: inline; /* IE6 fix */
}
参考サイト
jQuery Masonry
http://masonry.desandro.com/

WEB制作の定番書