網頁設計, 網頁資源

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

梅干 2017/01/03
梅問題-Bootstrap教學-「Bootstrap+Masonry」讓網格系統也支援瀑布流版型
  雖然說Bootstrap的網格系統相當的方便好用,但只要區塊內的元素大小不一致時,就會造成跑版的問題,雖然Bootstrap也有提供長短腳的解決方法,但就得去計算出,每滿12個單位數時,加入一個長短腳的修正,所以當元素有長有短時,或許改用瀑布流是一個不錯的方式。
  但要如何將瀑布流的套件與Bootstrap網格系統整合在一塊,其實方法很簡單,當整合後不但讓Bootstrap的網格支援瀑布流排版,同時還能透過Bootstrap內建的網格規則,來控制瀑布流的行列數,至於要怎麼在Bootstrap中使用Masonry套件,現在就一塊來看看吧!
Step1
首先,先在body中加入bootstrap的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>

Step2
由於圖片有直有橫,這時就會造成跑版的問題。
梅問題-Bootstrap教學-「Bootstrap+Masonry」讓網格系統也支援瀑布流版型
Step3
接著在/body前,加入下方的script。
<script src="http://desandro.github.io/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script>
	$(function(){
		$('.masonry').masonry({
			itemSelector: '.item'
	});
</script>

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

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