1、分別加載jquery插件與jquery.masonry插件兩個(gè)文件下載
jquery插件：http://jquery.com
也可以
引用google的cdn外部jquery核心庫JS文件下載
jquery.masonry插件：http://masonry.desandro.com/
加載代碼：
1 | <script src="js/jquery-1.8.1.min.js"></script> |
2 | <script src="js/jquery.masonry.min.js"></script> |
解釋?zhuān)汉芎?jiǎn)單，就是把下載之后的腳本文件嵌入到你想使用瀑布流形式的頁(yè)面中，注意文件的名稱(chēng)與路徑，根據你自己的實(shí)際情況修改。
2、瀑布流布局樣式代碼解釋?zhuān)横槍Φ诙降捻?yè)面代碼，我們需要添加一點(diǎn)樣式，.box 類(lèi)我們添加了浮動(dòng)屬性，還設置了他的寬度。
3、頁(yè)面瀑布流布局html代碼1 | <div id="masonry" class="container-fluid"> |
2 | <div class="box"><img src="images/1.jpg"></div> |
3 | <div class="box"><img src="images/2.jpg"></div> |
4 | <div class="box"><img src="images/3.jpg"></div> |
5 | <div class="box"><img src="images/4.jpg"></div> |
6 | <div class="box"><img src="images/5.jpg"></div> |
解釋?zhuān)喊衙總€(gè)小內容塊放在一個(gè)擁有相關(guān)類(lèi)的容器里，然后把所有的內容塊放在一個(gè)大的容器里，這里我們把內容塊圖片放在一個(gè)擁有 .box 類(lèi)的 <div> 標簽里，然后把他們又使用帶有 #masonry ID 的 <div> 里面，一會(huì )兒我們會(huì )用 #masonry ID 和 .box 類(lèi)來(lái)觸發(fā)使用
瀑布流。
4、初始化瀑布流插件的jquery腳本代碼02 | var $container = $('#masonry'); |
03 | $container.imagesLoaded( function(){ |
05 | itemSelector : '.box', |
解釋?zhuān)哼@里我們首先定位想使用瀑布流的大容器是什么，這里就是帶有 #masonry ID 的 <div> 標簽，在 var $container = $('#masonry'); 這行代碼中定義。然后我們還要說(shuō)明瀑布流里的每個(gè)內容塊容器上共同的類(lèi)是什么，這里就是帶有 .box 類(lèi)的 <div> 標簽，在itemSelector : '.box', 這行代碼中定義。
gutterWidth : 20, 這行代碼定義了內容塊之間的距離是 20 像素，isAnimated: true, 這行代碼可以打開(kāi)動(dòng)畫(huà)選項，也就是當改變窗口寬度的時(shí)候，每行顯示的內容塊的數量會(huì )有變化，這個(gè)變化會(huì )使用一種動(dòng)畫(huà)效果。
相關(guān)案例演示和下載:http://www.jq-school.com/Detail.aspx?id=29
本站僅提供存儲服務(wù)，所有內容均由用戶(hù)發(fā)布，如發(fā)現有害或侵權內容，請
點(diǎn)擊舉報。
