jquery.masonry瀑布流效果
更新時間：2017年05月25日 08:56:29 作者：JiangJunDriver
這篇文章主要為大家詳細介紹了jquery.masonry瀑布流效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
一、分別加載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 類我們添加了浮動屬性，還設置了他的寬度。
三、頁面瀑布流布局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>
解釋：把每個小內容塊放在一個擁有相關類的容器里，然后把所有的內容塊放在一個大的容器里，這里我們把內容塊圖片放在一個擁有 .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'); 這行代碼中定義。然后我們還要說明瀑布流里的每個內容塊容器上共同的類是什么，這里就是帶有 .box 類的 <div> 標簽，在itemSelector : ‘.box', 這行代碼中定義。gutterWidth : 20, 這行代碼定義了內容塊之間的距離是 20 像素，isAnimated: true, 這行代碼可以打開動畫選項，也就是當改變窗口寬度的時候，每行顯示的內容塊的數(shù)量會有變化，這個變化會使用一種動畫效果。
demo下載地址 瀑布流
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了jQuery Collapse1.1.0折疊插件的使用方法 ，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
Jquery其實本身可以操作select表單，但是由于比較反鎖，沒有.net 控件那樣去操作方便，我在網(wǎng)上Google了一會，發(fā)現(xiàn)了一個不錯的專門操作select的插件，很好，使用過了，感覺蠻不錯的。2009-11-11
本篇文章是對JQuery獲取和設置Select選項的一些常用方法進行了匯總介紹，有需要的朋友可以參考一下2013-07-07
下面介紹自己寫的一個jQuery圓角的插件，功能非常簡單。目前只能實現(xiàn)1px的固定弧度的圓角矩形邊框。2010-10-10
自己動手制作jquery插件之自動添加刪除行的實現(xiàn)
我們常常會遇到這樣的情況，一個系統(tǒng)中有大量的需要對一個行進行復制添加，希望能夠進行批量的操作，這個時候，我們就可以考慮把它做成一個jquery插件了.2011-10-10
這篇文章主要介紹了jQuery中hasClass()方法用法,實例分析了hasClass()方法的功能、定義及驗證匹配元素是否包含指定類的使用技巧,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了jquery獲取多個checkbox的值異步提交給php的相關資料,需要的朋友可以參考下2015-07-07
最近由于項目的需要，需要動態(tài)的添加和刪除table中的tr，感覺用JS可以實現(xiàn)，但是在網(wǎng)上找了一下，單純的自己寫JS，感覺太麻煩，而且也不好維護。于是想到了最近學的jQuery。這篇文章給大家用實例介紹了jQuery動態(tài)添加與刪除tr行的方法，有需要的朋友們可以參考借鑒。2016-10-10
基于jQuery Ajax實現(xiàn)下拉框無刷新聯(lián)動
這篇文章主要為大家詳細介紹了基于jQuery Ajax實現(xiàn)下拉框無刷新聯(lián)動，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
這篇文章主要介紹了jQuery如何分別獲取選中的復選框值,需要的朋友可以參考下2014-06-06