jQuery外掛-jQuery Masonry瀑布流版型套件

梅問題-jQuery外掛-jQuery Masonry瀑布流版型編排
  前陣子看到有不少的網站,將網站中的Div區塊,隨著Div的高度,自行的向下編排,看起來蠻有雜誌的感覺,而這種編排方式,中文叫作瀑布流版型,原因就在於,它會先取出Div的寬高,再依序的向下排列,就像瀑布一樣,看起來很像是CSS的浮動排版一樣,昨天看到好友哇哇的網站,也將首頁改成這種瀑布流版型,由於哇哇的圖有大有小,整個排起來特別的有fu。
  雖然很有fu,但因為這種曝布流版型,會先取出Div的高度,再去計算出每個Div的位置,所以一旦圖片比較晚載入,而程式已取出Div高度時,就會發生兩個區塊重疊的冏境,雖然這種瀑布流版型,可用CSS3中的column-count來完成,但IE要10.0才有支援XD~,所以只好利用jQuery的Masonry外掛元件來完成,且只要簡單的設定參數,立即就可套用囉!喜歡這效果的朋友參考看看囉!改天梅干再來分享CSS3的版本,更簡單更ez。
jQuery Masonry套件:
外掛元件:jQuery Masonry
外掛版本:v2.1
官方網站:http://masonry.desandro.com/index.html
※需載入jQuery1.7+以上

引用Jquery+jQuery Masonry:
放在<head>.....</head>之間:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://masonry.desandro.com/jquery.masonry.min.js"></script>

HTML:
放在<body>.....</body>之間:
<div id="_container" style="height:800px; width:728px; overflow:hidden; margin:0 auto;">         
     <div class="content_box">內容1</div>
     <div class="content_box">內容2</div>
     <div class="content_box">內容3</div>
     <div class="content_box">內容4</div>
     <div class="content_box">內容5</div>
     <div class="content_box">內容6</div>
</div>

CSS樣式設定:
放在<head>.....</head>之間:
.content_box{
	display: inline-block;
	border: 1px dotted #4F4F4F;
	padding: 10px;
	margin: 5px 5px 5px 0;
	overflow:hidden;
	width:337px;
}

啟用Jquery Masonry元件:
放在<script>.....</script>之下:
$(function(){
	$('#_container').imagesLoaded(function () {
        $('#_container').masonry({        
            itemSelector: '.content_box',
            columnWidth: 364,
            animate:true
        });
	});
});

Jquery Masonry參數說明:
imagesLoaded:用來防止計算圖片寬度和高度的錯誤
itemSelector:要套用效果的DIV
columnWidth:欄位寬度,當圖片載入失敗,或是還沒載入時,預設的寬高會以這為主
animate:動態效果

結果預覽:
梅問題-jQuery外掛-jQuery Masonry瀑布流版型編排
[範例預覽] [範例下載]

相關文章

Bootstrap滾動頁籤加入hash動態變換網址,更有助於SEO

Bootstrap滾動頁籤加入hash動態變換網址,更有助於SEO

「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像

「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像

jQuery取得各裝置視窗實際顯示的寬度、高度

jQuery取得各裝置視窗實際顯示的寬度、高度

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

jQeury外掛「scroll-scope」鎖定DIV區塊滾動範圍

jQeury外掛「scroll-scope」鎖定DIV區塊滾動範圍





回應本篇 »

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

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

共 18 梅留言

  • 第3梅
    Alan 說道:

    老師我請問一下,我套用了此套件後,我以iframe顯示這套用的這個網頁而iframe是自動抓取頁面高度,變成下面會多了空白區域,而且只要資料越多區域就越大,不知是否有方法解決?

    網址如下
    http://bubble.lionfree.net/hzsave/news_industry.php

    回應:
    如用iframe的話 會有點麻煩,
    可以試試看,在版面高度堆疊出來後,
    再把值回傳給iframe應該可解決
  • 第2梅
    唐俊庭 說道:

    使用此套件影響到後台php做排序功能 以至於無法照順序去排列 請問大大有辦法解決嗎

    回應:
    這是前端的程式語法,並不會影響到php的排序
  • 第1梅
    chyuanyiin 說道:

    梅老師您是指瀏覽器要開cookie呢?或是程式本身要加入cookie?

    如果是程式要加cookie的話? 能請老師指點要如何加? 加在何處?

    以上請指點

    謝謝梅老師

    回應:
    cookie是把資料,記錄在用戶端的瀏覽器裡,
    程式本身要去存取cookie
1 4 5 6