js瀑布流

最新推荐文章于 2020-11-28 21:57:12 发布

Gaia_qi

最新推荐文章于 2020-11-28 21:57:12 发布

阅读量192

点赞数

分类专栏：技术分享文章标签： js 瀑布流

本文链接：https://blog.csdn.net/Gaia_qi/article/details/103427249

版权

技术分享专栏收录该内容

12 篇文章 0 订阅

订阅专栏

做一个基于jquery的瀑布流插件：

/**
 * Created by qi on 2019/12/6.
 * 本插件适用于IE9+
 * 基于jquery
 */
var layout = function(param){
    var el = param.el;//绑定元素
    var column = param.column||3;//列数，默认3列
    var padding = param.padding/2||10;//设置列距，默认是20px

    var item = $(el).find('.item');//item个数
    var width = Math.round(100/column*100)/100;//根据列数计算宽度
    var arr = [];//存放高度的数组
    for(var i =0;i<column;i++){arr[i] = 0;}//初始数组每一项都为0
    //var arr = new Array(column).fill(0);//ie不支持fill方法

    $(el).css({'position':'relative','margin-left': -padding+'px','margin-right':-padding+'px'});//初始化容器
    item.css({'position':'absolute','box-sizing':'border-box','padding':padding+'px'});//初始项目
    item.css({'width':width+'%'});//设置每个项的宽度用%设置，取俩位小数
    for (var i=0;i<item.length;i++){
        var minTop = Math.min.apply(null,arr);//获取高度最小的行
        var which = arr.indexOf(minTop);//高度最小行是第一列
        var thisLeft = which*width+'%';
        item.eq(i).css({'top':minTop+'px','left':thisLeft});//设置第i个item的top和left
        arr[which] += item.eq(i).outerHeight(true);//item显示在第几行给第几行加上这个item的高度
    }
    var maxTop = Math.max.apply(null,arr);//获取高度最大的行
    $(el).css('height',maxTop+'px');
};

应用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js实现瀑布流</title>
    <style>
        .box{width: 1200px;border: 1px solid #333;margin: 0 auto;}
        .item img{width: 100%; border: 1px solid #333;}
    </style>
</head>
<body>
    <div class="box">
        <div class="wrap">
            <div class="item"><img src="images/1.jpg" alt=""></div>
            <div class="item"><img src="images/2.png" alt=""></div>
            <div class="item"><img src="images/3.png" alt=""></div>
            <div class="item"><img src="images/4.png" alt=""></div>
            <div class="item"><img src="images/5.png" alt=""></div>
            <div class="item"><img src="images/2.png" alt=""></div>
            <div class="item"><img src="images/1.jpg" alt=""></div>
            <div class="item"><img src="images/2.png" alt=""></div>
            <div class="item"><img src="images/3.png" alt=""></div>
            <div class="item"><img src="images/4.png" alt=""></div>
            <div class="item"><img src="images/3.png" alt=""></div>
            <div class="item"><img src="images/4.png" alt=""></div>
            <div class="item"><img src="images/5.png" alt=""></div>
            <div class="item"><img src="images/2.png" alt=""></div>
            <div class="item"><img src="images/1.jpg" alt=""></div>
            <div class="item"><img src="images/2.png" alt=""></div>
        </div>
    </div>
</body>
<script src="js/jquery.js"></script>
<script src="js/Waterfall.js"></script>
<script>
    $(function(){
        layout({
            el:'.wrap',
            column:4,
            padding:20
        });
    })
</script>
</html>

效果：

Gaia_qi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js瀑布流

做一个基于jquery的瀑布流插件：/** * Created by qi on 2019/12/6. * 本插件适用于IE9+ * 基于jquery */var layout = function(param){ var el = param.el;//绑定元素 var column = param.column||3;//列数，默认3列 var padd...
复制链接

扫一扫