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)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
優(yōu)秀js開源框架-jQuery使用手冊(1)...2007-03-03
這篇文章主要介紹了jQuery中after()方法用法,以實例形式較為詳細的分析了after()方法的功能、特性與使用技巧,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
jQuery Validate 無法驗證 chosen-select元素的解決方法
這篇文章主要介紹了jQuery Validate 無法驗證 chosen-select元素的解決方法,需要的朋友可以參考下2017-05-05
如果您不希望下載并存放jQuery，那么也可以通過 CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）引用它，下面是具體實現(xiàn)，有類似需求的各位可以參考下哈，希望對你有所幫助2013-05-05
本篇文章主要介紹了jQuery操作css樣式的相關(guān)知識，具有很好的參考價值。下面跟著小編一起來看下吧2017-05-05
學習了jquery,發(fā)現(xiàn)其功能真的很令我驚訝，為表格添加背景色用css也可以實現(xiàn)，卻不得不在<tr>標簽里一行一行地添加，但用jquery只需四行代碼，就是這樣精簡的用法，讓我對jquery產(chǎn)生了極大的興趣，也不得不驚嘆新興的技術(shù)所帶來的效率！2010-01-01
Jquery實現(xiàn)兼容各大瀏覽器的Enter回車切換輸入焦點的方法
本文主要講解的是在做項目中遇到需要Enter回車切換輸入焦點的解決思路以及最終解決方案，很簡單，需要的朋友可以參考下2014-09-09
jQuery是目前最流行的 JavaScript 庫。對于初學者來說，有的時候很難找到一個好的學習jQuery的網(wǎng)站，今天本文收集了12個很棒的 jQuery 學習網(wǎng)站推薦給大家。2011-04-04
用jquery的大概有一年了，只知道$(selector)，其內(nèi)部選擇器是如何實現(xiàn)并不完全不清晰，汗顏啊于是看了jquery的源碼,jquery用的選擇器的引擎是sizzle,感興趣的朋友可以了解下，或許本文對你有所幫助2013-02-02
jQuery Password Validation密碼驗證
這篇文章主要介紹了jQuery Password Validation密碼驗證的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12