用 Bootstrap + Masonry 製作瀑布流

期末專題要做一個演唱會資料統整系統，去政府資料開放平臺以及 PTT 撈資料，經過一些處理後，呈現在自己的網站中。專題規定要製作響應式網站，雖然 Bootstrap 都已經做好 Layout 排版了，可是當 Column 的東西大小不同時，並不會自動補齊空格，所以用了 Masonry 這個套件來解決問題

遇到的問題

網頁呈現目前的演唱會資訊。可以看到有些文字較長，會使得整個框框凸出

加入瀑布流效果，畫面變得比較好看

甚麼是瀑布流

瀑布流，又稱瀑布流式佈局。是比較流行的一種網站頁面配置，視覺表現為參差不齊的多欄佈局，隨著頁面捲軸向下滾動，這種佈局還會不斷載入資料塊並附加至當前尾部。最早採用此佈局的網站是 Pinterest。

需要用到的套件

要快速的製作一個手工瀑布流，用套件最快拉，把這幾個套件拼拼湊湊就完成囉！

1. Bootstrap：簡潔，直覺，強大的行動設備優先前端框架，讓網頁開發更快速更簡單。http://getbootstrap.com/
2. jQuery：一套跨瀏覽器的 JavaScript 函式庫，簡化 HTML 與 JavaScript 之間的操作。http://jquery.com/
3. Masonry：制作瀑布流的 JavaScript 函式庫。http://masonry.desandro.com/

Masonry 的 code 很簡單，舉例來說：所有的內容放在 box，每個內容為 item

<div class='row box'>
    <div class='item col-xs-12 col-sm-6 col-md-4'>
        <div class='panel panel-default'>test</div>
    </div>
    <div class='item col-xs-12 col-sm-6 col-md-4'>
        <div class='panel panel-default'>test</div>
    </div>
    <div class='item col-xs-12 col-sm-6 col-md-4'>
        <div class='panel panel-default'>test</div>
    </div>
</div>

<script>
    $('.box').masonry({
        itemSelector: 'item',
    });
</script>

參考資料

• 互動百科-瀑布流
• 纯手工打造漂亮的瀑布流，五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox！