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

Category
： Javascript

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

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

ダウンロード・使い方

ダウンロード元「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 を切ったそのままの状態ですとこうなります。