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


遇到的問題

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

hiticket0

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

hiticket1


甚麼是瀑布流

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