用 Bootstrap + Masonry 製作瀑布流

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


遇到的問題

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

hiticket0 - 用 Bootstrap + Masonry 製作瀑布流

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

hiticket1 - 用 Bootstrap + 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>

參考資料

Jerry
Jerry

樂於分享的軟體工程師,曾在新創與大型科技公司實習,獲得黑客松競賽冠軍,擔任資安研討會講者。長期熱衷於資訊安全、雲端服務、網路行銷等領域,希望將科技知識分享給更多人。內容轉載請來信:jlee58tw@gmail.com

發表回應