jquery實現(xiàn)超簡單的瀑布流布局【推薦】
更新時間：2017年03月08日 14:37:33 作者：小結(jié)巴巴吧
本文主要介紹了jquery實現(xiàn)超簡單的瀑布流布局的實例，代碼簡單，容易修改。下面跟著小編一起來看下吧
1.看看效果吧！
2.html代碼index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{position: relative;padding: 0 -3px;list-style: none;width: 600px;margin: 0 auto}
li{width: 33.33%;position: absolute;box-sizing: border-box;display: block; }
img{width: 100%;height: auto;display: block;}
</style>
<script src="./jquery-1.12.4.min.js"></script>
</head>
<body style="background: #000">
<ul class="flowLayout-box">
<li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u17.png" alt=""></li>
<li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u19.png" alt=""></li>
<li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u114.png" alt=""></li>
<li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u116.png" alt=""></li>
<li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u118.png" alt=""></li>
<li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u120.png" alt=""></li>
<li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u132.png" alt=""></li>
</ul>
</body>
</html>
3.插件代碼
(function ($) {
$.fn.flowLayout = function(options) {
var dft = {
gapWidth:16, //間隙
gapHeight:16, //間歇
column:3 //列
};
var ops = $.extend(dft,options);
var _this = $(this);
_this.width((_this.parents('.flowLayout-box').width()-2*ops.gapWidth)/3)
var _pWidth=_this.parents('.flowLayout-box').width();
$(".flowLayout-box").css({
'opacity':0
});
var columnHeight=[],columnIndex=0;
for (var i=0 ;i<ops.column;i++){
columnHeight.push(0);
}
setTimeout(function () {
for(var j =0 ; j< _this.length ;j++){
console.log(columnHeight[columnIndex]);
$(_this).eq(j).css({
'top':columnHeight[columnIndex]+ops.gapHeight+'px',
'left':_pWidth*columnIndex/3+'px'
})
columnHeight[columnIndex]+=$(_this).eq(j).height()+ops.gapHeight
columnIndex=getIndex();
}
},50)
function getIndex() {
var columnIndex=0,maxHeight=0;
for(var i =0 ;i < columnHeight.length ;i++){
if(columnHeight[i]<columnHeight[columnIndex]){
columnIndex=i;
}
if(columnHeight[i]>maxHeight){
maxHeight=columnHeight[i]
}
}
$(".flowLayout-box").css({
'opacity':1,
'height':maxHeight
});
return columnIndex;
}
}
})(jQuery);
4.調(diào)用代碼
$(function () {
$('.flowLayout-box li').flowLayout({});
})
代碼簡單，容易修改，，拿去用吧。。
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
JQuery魔力之$("tagName")與selector
DOM 中的 getElementsByTagName()方法在JQuery中的表現(xiàn)就是$(“tagName”)這么簡單！tag標(biāo)簽（可以是：p、div、button …）標(biāo)簽本身具有ID、Class等屬性2012-03-03
jQuery實現(xiàn)的簡單動態(tài)添加、刪除表格功能示例
這篇文章主要介紹了jQuery實現(xiàn)的簡單動態(tài)添加、刪除表格功能,涉及jQuery事件響應(yīng)及表格元素動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-09-09
jQuery解決input元素的blur事件和其他非表單元素的click事件沖突問題
這篇文章主要介紹了jQuery解決input元素的blur事件和其他非表單元素的click事件沖突問題,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
開發(fā)網(wǎng)站的過程中，我們經(jīng)常遇到某些耗時很長的javascript操作。其中，既有異步的操作（比如ajax讀取服務(wù)器數(shù)據(jù)），也有同步的操作（比如遍歷一個大型數(shù)組），它們都不是立即能得到結(jié)果的。2014-11-11
這篇文章主要為大家分享了適應(yīng)手機端的jQuery圖片滑塊動畫,不僅在PC瀏覽器上可以使用，而且更適合在手機端的網(wǎng)頁中使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
下面小編就為大家?guī)硪黄仙Ｕ凧Query data方法的使用。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
jQuery 獲取對象 定位子對象，學(xué)習(xí)jquery 定位子對象的朋友可以參考下。2010-05-05
原生方法明顯要比jQuery方法快，因為jQuery方法要處理瀏覽器兼容以及其他一些事情，如果你針對的是現(xiàn)代瀏覽器，那么使用原生方法會使性能有很大的提升2013-05-05
10個基于jQuery或JavaScript的WYSIWYG 編輯器整理
10驚人的自由豐富的文本編輯器，將提升您的網(wǎng)站的功能。我已經(jīng)收集了5 jQuery和5個非jQuery實時評價附帶簡單的功能，具有辦公一樣的功能。2010-05-05
這篇文章主要介紹了jQuery簡單判斷值是否存在于數(shù)組中的方法,涉及jQuery數(shù)組遍歷及基于$.inArray的元素判斷相關(guān)操作技巧,需要的朋友可以參考下2018-04-04