1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. Bootstrap教學-「Bootstrap+Masonry」讓網格系統也支援瀑布流排版

Bootstrap教學-「Bootstrap+Masonry」讓網格系統也支援瀑布流排版

2017/01/02

梅問題-Bootstrap教學-「Bootstrap+Masonry」讓網格系統也支援瀑布流版型

  雖然說Bootstrap的網格系統相當的方便好用,但只要區塊內的元素大小不一致時,就會造成跑版的問題,雖然Bootstrap也有提供長短腳的解決方法,但就得去計算出,每滿12個單位數時,加入一個長短腳的修正,所以當元素有長有短時,或許改用瀑布流是一個不錯的方式。


  但要如何將瀑布流的套件與Bootstrap網格系統整合在一塊,其實方法很簡單,當整合後不但讓Bootstrap的網格支援瀑布流排版,同時還能透過Bootstrap內建的網格規則,來控制瀑布流的行列數,至於要怎麼在Bootstrap中使用Masonry套件,現在就一塊來看看吧!


Step1
首先,先在body中加入bootstrap的html網格標籤。
[html]
<div class="container">
<div class="row">
<div class="col-md-3">
<img src="01.jpg" alt="" class="img-responsive">
</div>
<div class="col-md-3">
<img src="02.jpg" alt="" class="img-responsive">
</div>
<div class="col-md-3">
<img src="03.jpg" alt="" class="img-responsive">
</div>
<div class="col-md-3">
<img src="04.jpg" alt="" class="img-responsive">
</div>
</div>
</div>
[/html]


Step2

由於圖片有直有橫,這時就會造成跑版的問題。
梅問題-Bootstrap教學-「Bootstrap+Masonry」讓網格系統也支援瀑布流版型


Step3

接著在/body前,加入下方的script。
[javascript]
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script>
$(function(){
$(‘.masonry’).masonry({
itemSelector: ‘.item’
});
</script>
[/javascript]


Step4

再把row後加入「masonry」,以及把col-md-3後再加入「item」。
[html]
<div class="row masonry">
<div class="col-md-3 item">
[/html]


Step5
完成後,這時版型就支援瀑布流的排版了。
梅問題-Bootstrap教學-「Bootstrap+Masonry」讓網格系統也支援瀑布流版型


Step6
當把col-md-3改成col-md-6,這是瀑布流就會變成二欄式,因此透過Bootsrap內建的網格數,就可任意的調整瀑布流的欄位數,是不是超方便的呀!
梅問題-Bootstrap教學-「Bootstrap+Masonry」讓網格系統也支援瀑布流版型


[範例預覽]