jquery实现超简单的瀑布流布局【推荐】
程序员文章站
2024-02-05 18:20:46
1.看看效果吧！
2.html代码index.html
<...
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.调用代码
$(function () {
$('.flowlayout-box li').flowlayout({});
})
代码简单，容易修改，，拿去用吧。。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！
上一篇： 浅谈网站高转换率法则之善于扫描的访客们
下一篇： 汪滔：无人机世界里的乔布斯