Masonry 是用來製作瀑布流版型的套件

基本使用方法
HTML

<!-- .box 長寬請自行設定 -->
<div id="container">
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
</div>

Javascript

$('#container').masonry({
	//選擇item
	itemSelector: '.box'
});

如果有讀入圖片,可以使用imagesLoaded的plugin

$('#container').imagesLoaded( function(){
	$('#container').masonry({
		itemSelector: '.box'
	});
});

更多細部設定可以參考官方文件

Categories: jQuery