首页 > 代码库 > jq超简单的流式布局，代码简单，容易修改

jq超简单的流式布局，代码简单，容易修改

2024-09-07 12:02:43   217人阅读

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="http://www.mamicode.com/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="http://www.mamicode.com/img/u17.png" ></li>
     <li class="flowLayout-item"> <img class="flowLayout-pic" src="http://www.mamicode.com/img/u19.png" ></li>
     <li class="flowLayout-item"> <img class="flowLayout-pic" src="http://www.mamicode.com/img/u114.png" ></li>
     <li class="flowLayout-item"> <img class="flowLayout-pic" src="http://www.mamicode.com/img/u116.png" ></li>
     <li class="flowLayout-item"> <img class="flowLayout-pic" src="http://www.mamicode.com/img/u118.png" ></li>
     <li class="flowLayout-item"> <img class="flowLayout-pic" src="http://www.mamicode.com/img/u120.png" ></li>
     <li class="flowLayout-item"> <img class="flowLayout-pic" src="http://www.mamicode.com/img/u132.png" ></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({});
     })

　　

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

 

jq超简单的流式布局，代码简单，容易修改


联系
我们