2014 / 02 / 05 瀑布流

教學網址：http://www.tellustek.com/web-design/159-web-design-60.html

《實作心得》



jQuery Masonry套件 js檔案 google 雲端空間下載 | masonry.desandro.com
masonry.pkgd.min.js
masonry.pkgd.j

以上為最14/2/下載的新版file，不過我實做不成功ˊ_>ˋ
成功的file檔名 jquery.masonry.min

step 1 . include the js file

html先把JS嵌入，測試成功的語法是
<script src="js/jquery-1.8.1.min.js"></script>
<script src="js/jquery.masonry.min.js"></script>

加入基本item的CSS
.item {
 width: 220px;
 margin: 10px;
 float: left;
}

step 2 . set the js settings

測試成功的JS語法(跟教學文一樣)
$(function(){
var $container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.item',
 isAnimated: true,
columnWidth : 240
});
});
});

.imagesLoaded //防止圖片高度計算錯誤
 isAnimated: true //動畫

Okay 剩下的只是美化