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

梅問題-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」讓網格系統也支援瀑布流版型
[範例預覽]

相關文章

「CSS3:target選擇器」免程式!純CSS就可實現Tab頁籤式的互動切換

「CSS3:target選擇器」免程式!純CSS就可實現Tab頁籤式的互動切換

Bootstrap教學-「Bootstrap Navbar導覽列強化!」支援多層級下拉選單

Bootstrap教學-「Bootstrap Navbar導覽列強化!」支援多層級下拉選單

jQeury外掛「imagesLoaded」解決瀑布流圖片未載入完造成區塊覆蓋問題

jQeury外掛「imagesLoaded」解決瀑布流圖片未載入完造成區塊覆蓋問題

利用CSS3偽類選擇器:checked,實作出Toggle開合選單效果

利用CSS3偽類選擇器:checked,實作出Toggle開合選單效果

Bootstrap教學-將Bootstrap導覽列加入如Apple官網點導覽列圖示變叉叉

Bootstrap教學-將Bootstrap導覽列加入如Apple官網點導覽列圖示變叉叉





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

近期講座

2017 (二月講座)

2017 (一月講座)

更多講座