【JS】懒加载和瀑布流

最新推荐文章于 2024-05-19 13:47:41 发布

粥粥周周舟舟

最新推荐文章于 2024-05-19 13:47:41 发布

阅读量406

点赞数 1

分类专栏： js CSS 文章标签： js css html

本文链接：https://blog.csdn.net/weixin_42717849/article/details/100903156

版权

js 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

CSS

7 篇文章 0 订阅

订阅专栏

懒加载

当打开一个有很多图片的页面时，先只加载页面上看到的图片，等滚动到页面下面时，再加载所需的图片。这就是图片懒加载。为了防止页面一次性向服务器发送大量请求，导致服务器响应面，页面卡顿崩溃，从而减少或延迟请求数，缓解浏览器的压力，增强用户体验。
原理：

设置图片src属性为同一张图片，同时自定义一个data-src属性来存储图片的真实地址
页面初始化显示的时候或者浏览器发生滚动的时候判断图片是否在视野中
当图片在视野中时，通过js自动改变该区域的图片的src属性为真实地址

<!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">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
    <style>
        .container{
            max-width: 800px;
            margin:0 auto;
        }
        .container:after{
            content:"";
            display: block;
            clear:both;
        }
        .container img{
            width:50%;
            height:260px;
            float:left;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img4.imgtn.bdimg.com/it/u=951914923,777131061&fm=26&gp=0.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img1.imgtn.bdimg.com/it/u=637435809,3242058940&fm=26&gp=0.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img1.imgtn.bdimg.com/it/u=3990342075,2367006974&fm=200&gp=0.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img1.imgtn.bdimg.com/it/u=1813891576,1754763093&fm=26&gp=0.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img4.imgtn.bdimg.com/it/u=2539922263,2810970709&fm=200&gp=0.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img4.imgtn.bdimg.com/it/u=1878067600,3935137756&fm=200&gp=0.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img3.imgtn.bdimg.com/it/u=85690711,3884201894&fm=26&gp=0.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img2.imgtn.bdimg.com/it/u=3844233833,3942617167&fm=200&gp=0.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img0.imgtn.bdimg.com/it/u=1846695025,2515725663&fm=26&gp=0.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img3.imgtn.bdimg.com/it/u=346230831,1833217134&fm=200&gp=0.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img5.imgtn.bdimg.com/it/u=3478148120,2683867435&fm=26&gp=0.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img5.imgtn.bdimg.com/it/u=2298824648,1812234339&fm=200&gp=0.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img2.imgtn.bdimg.com/it/u=4201594846,4178139206&fm=26&gp=0.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img2.imgtn.bdimg.com/it/u=484389598,819397330&fm=200&gp=0.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img1.imgtn.bdimg.com/it/u=3729466012,914166979&fm=26&gp=0.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img2.imgtn.bdimg.com/it/u=354463615,3836278171&fm=200&gp=0.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img5.imgtn.bdimg.com/it/u=1831250492,3489827059&fm=200&gp=0.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img1.imgtn.bdimg.com/it/u=779005622,2247570143&fm=200&gp=0.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img1.imgtn.bdimg.com/it/u=1968229118,3512711019&fm=26&gp=0.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690" alt="1" data-src="http://img2.imgtn.bdimg.com/it/u=1088428253,1150170159&fm=200&gp=0.jpg">
    </div>

        <script>

            // 一开始没有滚动的时候，出现在视窗中的图片也会加载
            start();

            // 当页面开始滚动的时候，遍历图片，如果图片出现在视窗中，就加载图片
            var clock; //函数节流
            $(window).on('scroll',function(){
                if(clock){
                    clearTimeout(clock);
                }
                clock = setTimeout(function(){
                    start()
                },200)
            })
            
            function start(){
                 $('.container img').not('[data-isLoading]').each(function () {
                    if (isShow($(this))) {
                        loadImg($(this));
                    }
                })
            }


            // 判断图片是否出现在视窗的函数
            function isShow($node){
                return $node.offset().top <= $(window).height()+$(window).scrollTop();
            }

            // 加载图片的函数，就是把自定义属性data-src 存储的真正的图片地址，赋值给src
            function loadImg($img){
                    $img.attr('src', $img.attr('data-src'));

                    // 已经加载的图片，我给它设置一个属性，值为1，作为标识
                    // 弄这个的初衷是因为，每次滚动的时候，所有的图片都会遍历一遍，这样有点浪费，所以做个标识，滚动的时候只遍历哪些还没有加载的图片
                    $img.attr('data-isLoading',1);
            }

        </script>
</body>
</html>

瀑布流

瀑布流布局，要求进行布局的元素等宽，然后计算元素的宽与浏览器的宽度之比，得到需要布置的列数。
创建一个数组，长度为列数，数组元素为每一列已布置元素的总高度。（一开始为0）。
将未布置的元素，依次布置到高度最小的那一列，然后更新这一列的高度，就得到了瀑布流布局。

<!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">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
    <style>
        .waterfall{
            max-width:700px;
            margin:0 auto;
        }
        .waterfall img{
            width:100px;
            /* 绝对定位实现瀑布流布局 */
            position: absolute;
            margin:5px;
            /* 给图片重新排列加上动画效果 */
            transition: all 0.5s;
        }

    </style>
</head>
<body>
     <div class="waterfall">
        <img src="http://placekitten.com/100/100" alt="300*100">
        <img src="http://placekitten.com/100/70" alt="300*70">
        <img src="http://placekitten.com/100/150" alt="300*150">
        <img src="http://placekitten.com/100/250" alt="300*250">
        <img src="http://placekitten.com/100/80" alt="300*80">
        <img src="http://placekitten.com/100/90" alt="300*90">
        <img src="http://placekitten.com/100/120" alt="300*120">
        <img src="http://placekitten.com/100/180" alt="300*180">
        <img src="http://placekitten.com/100/100" alt="300*100">
        <img src="http://placekitten.com/100/70" alt="300*70">
        <img src="http://placekitten.com/100/150" alt="300*150">
        <img src="http://placekitten.com/100/250" alt="300*250">
        <img src="http://placekitten.com/100/80" alt="300*80">
        <img src="http://placekitten.com/100/90" alt="300*90">
        <img src="http://placekitten.com/100/120" alt="300*120">
        <img src="http://placekitten.com/100/180" alt="300*180">
     </div>
     <script>
        //  列的数量（容器的宽度除以图片的宽度得出的）
         var colCount;
        //  存放每一列的高度的数组
         var colHeightArray = [];
        //  每张图片的宽度
        // 这里只所以用 outerWidth 是因为图片可能会有边框 margin之类的，一并计算进去
        var imgWidth = $('.waterfall img').outerWidth(true);
        
         colCount = Math.floor($('.waterfall').width() / imgWidth);
         console.log(colCount);

        //  得到列数之后。对数组进行初始化，每一些的高度初始化为0
        for(var i = 0;i < colCount;i++){
            colHeightArray[i] = 0;
        }
        
        console.log($('.waterfall img').eq(2).height());
        
        // 然后开始摆放位置了，但是如果图片还没有加载，那么计算得到的列的宽高是不对的，所以要先确认图片加载
        $('.waterfall img').on('load',function(){
            // 我们假设数组里第一个高度值是最小的
            var minValue = colHeightArray[0];
            // 最小的高度的下标是0
            var minIndex = 0
            // 然后遍历高度数组，找出最小值，如果还有值比minVlue小，就把这个值作为最小值，它的下标作为最小值的下标
            for(var i = 0;i< colCount;i++){
                if(colHeightArray[i]<minValue){
                    minValue = colHeightArray[i];
                    minIndex = i;
                }
            }
            // 给先加载出来的图片设置定位，摆放图片
            $(this).css({
                left: minIndex * imgWidth,
                top: minValue
            })
            console.log(minValue);

            // 图片摆放好，这一列的高度就要进行更新了
            colHeightArray[minIndex] += $(this).outerHeight(true)

        })

        
        // 下边这一部分，是实现了当窗口尺寸发生变化的时候，图片实现重新排列
        $(window).on('resize',function(){
            // 每次窗口大小改变以后，列数，跟每列的高度数组，都会发生变化，所以要重新声明
            var colCount;  
            var colHeightArray = [];
            // 每次尺寸变化，都要重新计算列数
            colCount = Math.floor($('.waterfall').width() / imgWidth);
            
            // 初始化每列的高度
            for(var i=0;i<colCount;i++){
                colHeightArray[i] = 0;
            }
            
            // 因为上边图片已经加载过了，所以直接遍历图片
            $('.waterfall img').each(function(){
                var minValue = colHeightArray[0];
                var minIndex = 0;

                for(var i=0;i<colCount;i++){
                    if(colHeightArray[i]<minValue){
                        minValue = colHeightArray[i];
                        minIndex = i;
                    }
                }
                // 给遍历到的图片设置位置
                $(this).css({
                    left:minIndex*imgWidth,
                    top:minValue
                })
                // 设置位置后，更新高度
                colHeightArray[minIndex] += $(this).outerHeight(true); 
            })
        })
     </script>
</body>
</html>

参考： https://www.jianshu.com/p/5d367221d865

粥粥周周舟舟

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【JS】懒加载和瀑布流

懒加载当打开一个有很多图片的页面时，先只加载页面上看到的图片，等滚动到页面下面时，再加载所需的图片。这就是图片懒加载。为了防止页面一次性向服务器发送大量请求，导致服务器响应面，页面卡顿崩溃，从而减少或延迟请求数，缓解浏览器的压力，增强用户体验。原理：设置图片src属性为同一张图片，同时自定义一个data-src属性来存储图片的真实地址页面初始化显示的时候或者浏览器发生滚动的时候判断图片是...
复制链接

扫一扫