有時候上網google一些圖片的時候，

不同大小的圖片都會乖乖地排在同一排，

實在很神奇，

最近也發現一些網站用這種方式排版，

感覺很好看，

尤其是滾輪往下滾的感覺，那些文章會自己對齊好，

希望自己也可以學會一點點來使用，

雖然我不覺得瀑布流是那種很百搭，甚麼都可以套瀑布流喇～

在網路上找到這個瀑布流神器＂Masonry＂

這是寫好的jquery plugin

也就是代表說，

１．只要<script>記得放jquery和Masonry

２．每個元件的css依照自己需求調整

就完成啦！！萬歲！！

實作方式：

１．在貼入

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>

２．在貼入自己要呈現的內容，例如：

<div id="container">
<div class="content_1"><img src="http://www.antbd.com/home/wp-content/uploads/2014/07/WWE-Battleground-20-07-2014-WEB-DL.jpg" /></div>
<div class="content_2"><img src="http://www.wwe.com/f/styles/photo_large/public/photo/image/2014/05/RAW_1096_Photo_052.jpg" /></div>
<div class="content_2"><img src="http://i.ytimg.com/vi/BkB4N1fsR-E/maxresdefault.jpg" /></div>
<div class="content_1"><img src="http://cdn3.whatculture.com/wp-content/uploads/2014/04/paige-wwe.jpg"></div>
<div class="content_2"><img src="http://image-cdn.zap2it.com/images/wwe-raw-recap-april-14.jpg" /></div>
</div>

３．在CSS加上每一個對應的class希望呈現的樣子（規定寬度或是長度，邊框，陰影之類的）

<style>
.content_1{
display: inline-block;
border: 1px #FFFFFF;
overflow:hidden;
width:300px;
}

.content_2{
display: inline-block;
border: 1px #CCCCCC;
overflow:hidden;
width:300px;
}
</style>

好像還有動畫效果，是要去加上javascript語法的，再研究研究，希望可以越來越熟練嘍～