WEB制作のメモ帳

2011-06-01

jquery

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

■使用するスクリプト
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/