floatさせた要素をレンガ風に整列してくれるjQuery Masonry

floatさせた要素をレンガ風に整列してくれるjQuery Masonry

floatさせると要素の高さによっては、想定していたように並ばないことがあるかと思うんですが、そんな時に使えるのが今回紹介するjQuery Masonryです。

まず水平方向に合わせた後、垂直方向にもあわせるので、綺麗に要素を整列できます。

demo page

…ここからが続き

ダウンロード・使い方

ダウンロード元「jQuery Masonry

head内

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.masonry.js"></script>
<script type="text/javascript">
	$(function(){
		$('.wrap').masonry(); 
	})
</script>

XHTML

<div class="wrap">

	<div class="box">
  		.........
  	</div>
    
 	<div class="box">
  		.........
  	</div>
    
 						~ 省略 ~
                        
 	<div class="box">
  		.........
  	</div>
    
</div>

CSS

.wrap {
	width: 880px;
	padding: 10px;
	background: #EEE;
	overflow: auto;
}
.box {
	width: 190px;
	margin: 5px;
	padding: 10px;
	float: left;
	background: #424242;
	color: #FFF;
	display: inline;  /* IE6 fix */
}

ちなみに jQuery Masonry を切ったそのままの状態ですとこうなります。

demo page

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article