欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jquery实现超简单的瀑布流布局【推荐】

程序员文章站 2024-02-05 18:20:46
1.看看效果吧! 2.html代码index.html <...

1.看看效果吧!

jquery实现超简单的瀑布流布局【推荐】

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({});
 })

代码简单,容易修改,,拿去用吧。。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!