一、分別加載jquery插件與jquery.masonry插件
<script src="js/jquery-1.8.1.min.js"></script><script src="js/jquery.masonry.min.js"></script>
二、瀑布流局部樣式代碼
.container-fluid { padding: 20px;}.box { margin-bottom: 20px; float: left; width: 220px;}.box img { max-width: 100%}解釋:針對第二步的頁面代碼,我們需要添加一點樣式,.box 類我們添加了浮動屬性,還設(shè)置了他的寬度。
三、頁面瀑布流布局html代碼
<div id="masonry" class="container-fluid"> <div class="box"><img src="images/1.jpg"></div> <div class="box"><img src="images/2.jpg"></div> <div class="box"><img src="images/3.jpg"></div> <div class="box"><img src="images/4.jpg"></div> <div class="box"><img src="images/5.jpg"></div></div>
解釋:把每個小內(nèi)容塊放在一個擁有相關(guān)類的容器里,然后把所有的內(nèi)容塊放在一個大的容器里,這里我們把內(nèi)容塊圖片放在一個擁有 .box 類的 <div> 標簽里,然后把他們又使用帶有 #masonry ID 的 <div> 里面,一會兒我們會用 #masonry ID 和 .box 類來觸發(fā)使用瀑布流。
四、初始化瀑布流插件的jquery腳本代碼
$(function(){ var $container = $('#masonry'); $container.imagesLoaded( function(){ $container.masonry({ itemSelector : '.box', gutterWidth : 20, isAnimated: true, }); });});解釋:這里我們首先定位想使用瀑布流的大容器是什么,這里就是帶有 #masonry ID 的 <div> 標簽,在 var $container = $('#masonry'); 這行代碼中定義。然后我們還要說明瀑布流里的每個內(nèi)容塊容器上共同的類是什么,這里就是帶有 .box 類的 <div> 標簽,在itemSelector : ‘.box', 這行代碼中定義。gutterWidth : 20, 這行代碼定義了內(nèi)容塊之間的距離是 20 像素,isAnimated: true, 這行代碼可以打開動畫選項,也就是當改變窗口寬度的時候,每行顯示的內(nèi)容塊的數(shù)量會有變化,這個變化會使用一種動畫效果。
demo下載地址 瀑布流
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答