用jQuery实现瀑布流及滚动懒加载（兼容IE8）

最新推荐文章于 2023-09-08 17:29:16 发布

炸_洋芋

最新推荐文章于 2023-09-08 17:29:16 发布

阅读量1.5k

点赞数 1

分类专栏： JavaScript 文章标签： jquery实现瀑布流 jQuery实现瀑布流及懒加载瀑布流布局及懒加载 jQuery实现瀑布流及懒加载兼容IE8 瀑布流布局兼容IE8

本文链接：https://blog.csdn.net/zhaoxiang66/article/details/82876713

版权

JavaScript 专栏收录该内容

24 篇文章 4 订阅

订阅专栏

上篇

js原生瀑布流并实现滚动懒加载（兼容IE8）

讲解了瀑布流的原理及滚动懒加载的原理，并用原生js实现了效果，那么原生js必定有些繁琐和麻烦，这一篇我们就换成jQuery，代码会简洁很多，思路和原理我就不赘述了，如果想看的话，移步

js原生瀑布流并实现滚动懒加载（兼容IE8）

就可以了
废话不多说我们直接上代码，思路和原理跟原生js一模一样

html部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href = "./css/waterfall.css">
    <title>jquery瀑布流布局</title>
</head>
<body>
    <div id = "main">
        <div class = "box">
            <div class = "pic">
                <img src = "./img/1.jpg" alt="">
            </div>
        </div>
        <div class = "box">
            <div class = "pic">
                <img src = "./img/2.jpg" alt="">
            </div>
        </div>
        <div class = "box">
            <div class = "pic">
                <img src = "./img/3.jpg" alt="">
            </div>
        </div>
        <div class = "box">
            <div class = "pic">
                <img src = "./img/4.jpg" alt="">
            </div>
        </div>
        <div class = "box">
            <div class = "pic">
                <img src = "./img/5.jpg" alt="">
            </div>
        </div>
        <div class = "box">
            <div class = "pic">
                <img src = "./img/6.jpg" alt="">
            </div>
        </div>
        <div class = "box">
            <div class = "pic">
                <img src = "./img/7.jpg" alt="">
            </div>
        </div>
        <div class = "box">
            <div class = "pic">
                <img src = "./img/8.jpg" alt="">
            </div>
        </div>
        <div class = "box">
            <div class = "pic">
                <img src = "./img/9.jpg" alt="">
            </div>
        </div>
        <div class = "box">
            <div class = "pic">
                <img src = "./img/10.jpg" alt="">
            </div>
        </div>
        <div class = "box">
            <div class = "pic">
                <img src = "./img/11.jpg" alt="">
            </div>
        </div>
        <div class = "box">
            <div class = "pic">
                <img src = "./img/12.jpg" alt="">
            </div>
        </div>
        <div class = "box">
            <div class = "pic">
                <img src = "./img/13.jpg" alt="">
            </div>
        </div>
        <div class = "box">
            <div class = "pic">
                <img src = "./img/14.jpg" alt="">
            </div>
        </div>
        <div class = "box">
            <div class = "pic">
                <img src = "./img/15.jpg" alt="">
            </div>
        </div>
        <div class = "box">
            <div class = "pic">
                <img src = "./img/16.jpg" alt="">
            </div>
        </div>
        <div class = "box">
            <div class = "pic">
                <img src = "./img/17.jpg" alt="">
            </div>
        </div>
        <div class = "box">
            <div class = "pic">
                <img src = "./img/18.jpg" alt="">
            </div>
        </div>
        <div class = "box">
            <div class = "pic">
                <img src = "./img/19.jpg" alt="">
            </div>
        </div>
        <div class = "box">
            <div class = "pic">
                <img src = "./img/20.jpg" alt="">
            </div>
        </div>
    </div>
    <!--[if lt IE 9]>
        <script src="./js/jquery-1.9.1.min.js"></script>
    <![endif]-->
    <!--[if gte IE 9]><!-->
    <script src="./js/jquery-3.3.1.min.js"></script>
    <!--<![endif]-->
    <script src = "./js/waterfall.js"></script>
</body>
</html>

css部分：

*{
    margin:0;
    padding:0;
}
#main{
    position: relative;
}
.box{
    padding:15px 0 0 15px;
    float:left;
}
.pic{
    padding:10px;
    border:1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 5px #ccc;
}
.pic img{
    width:165px;
    height:auto;
}

js部分：

$(window).on("load",function(){
    waterfall();
    var dataInt = {
        "data":[
            {
                "src":'./img/1.jpg'
            },
            {
                "src":'./img/3.jpg'
            },
            {
                "src":'./img/5.jpg'
            },
            {
                "src":'./img/8.jpg'
            },
            {
                "src":'./img/12.jpg'
            }
        ]
    }
    $(window).on("scroll",function(){
        if(checkScrollSlide){
            $.each(dataInt.data,function(key,value){
                var oBox = $("<div>").addClass('box').appendTo($("#main"));
                var oPic = $("<div>").addClass('pic').appendTo($(oBox));
                var oImg = $("<img>").attr("src",$(value).attr("src")).appendTo($(oPic)); 
            })
            waterfall();
        }
    })
})
function waterfall(){
    var $boxs = $("#main>div");
    //获取box的宽度
    var w = $boxs.eq(0).outerWidth();
    var cols = Math.floor($(window).width()/w);
    $("#main").width(w*cols).css('margin','0 auto');
    var hArr = [];
    $boxs.each(function(index,value){
        var h = $boxs.eq(index).outerHeight();
        if(index < cols){
            hArr[index] = h;
        }else{
            var minH = Math.min.apply(null,hArr);
            var minHIndex = $.inArray(minH,hArr);
            $(value).css({
                'position':'absolute',
                'top':minH + 'px',
                'left':minHIndex*w + 'PX'
            })
            hArr[minHIndex] += $boxs.eq(index).outerHeight();
        }
    })
}
//图片懒加载
function checkScrollSlide(){
    var $lastBox = $("#main>div").last();
    var lastBoxDis = $lastBox.offset().top + Math.floor($lastBox.outerHeight()/2);
    var srcollTop = $(window).srcollTop();
    var documentH = $(window).height();
    return (lastBoxDis < srcollTop + documentH)?true:false;
}

下面我们来看下最终效果
在这里插入图片描述

懒加载效果：

在这里插入图片描述

是不是觉得换了jQuery之后简单了许多啊，哈哈！注意：此代码依然兼容IE8！

炸_洋芋

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
用jQuery实现瀑布流及滚动懒加载（兼容IE8）

上篇js原生瀑布流并实现滚动懒加载（兼容IE8）讲解了瀑布流的原理及滚动懒加载的原理，并用原生js实现了效果，那么原生js必定有些繁琐和麻烦，这一篇我们就换成jQuery，代码会简洁很多，思路和原理我就不赘述了，如果想看的话，移步js原生瀑布流并实现滚动懒加载（兼容IE8）就可以了废话不多说我们直接上代码，思路和原理跟原生js一模一样html部分：&amp;lt;!DOCTYPE h...
复制链接

扫一扫

专栏目录