JS-案例-瀑布流 懒加载

最新推荐文章于 2024-05-23 14:11:31 发布
最新推荐文章于 2024-05-23 14:11:31 发布
阅读量252 收藏
点赞数
分类专栏： 案例 文章标签： JS 瀑布流 懒加载
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45092792/article/details/91871452
版权

封装函数部分

var Utils=(function () {
    return {
        //SSS
        loadImg:function (srcList,callBack) {
            var img=new Image();
            img.num=0;
            img.imgList=[];
            img.srcList=srcList;
            img.callBack=callBack;
            img.addEventListener("load",this.loadHandler);
            img.src="./img/"+srcList[img.num];

        },
        loadHandler:function (e) {
            // console.log(this.num);
            // console.log(this.imgList);
            // console.log(this.callBack);
            this.imgList.push(this.cloneNode(false));
            this.num++;
            if(this.num>=this.srcList.length){
                this.callBack(this.imgList);
                return;
            }
            //事件侦听没有被删除,只需更改src,加载后仍然触发了该事件,进入该函数
            this.src="./img/"+this.srcList[this.num];
        },
        ce:function (type,style) {
            var elem=document.createElement(type);
            Object.assign(elem.style,style);
            return elem;
        },
        randomColor:function () {
            var col="#";
            for(var i=0;i<6;i++){
                col+=Math.floor(Math.random()*16).toString(16);
            }
            return col;
        }
    }
})();

瀑布流

mian代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/Utils.js"></script>
</head>
<body>
    <script>
        /*
        *
        *  1\创建ul,创建li,创建指定数量的li,并且做浮动,设置各li的宽度
        *  2\创建一个数组,这个数组里面是统计每个li的当前高度
        *  3\创建图片,加载图片,设置图片宽度,获取图片高度
        *  4\寻找数组中最小高度的索引值,在li中找到这个索引值对应的列,
        *  5\将加载进来图片放入在这个列中并且累加高度存储在数组中对应的元素中
        *  6\继续加载新的图片,直到图片加载完成
        *
        * */
            var bodyWidth,colWidth,ul;//定义页面宽度，列宽，ul
            let {ce}=Utils;//解构赋值
            var minHeight=[],//定义最小高度为一数组
                position=3;//图片开始的名称为3
            const COL=5,//定义常量列的数量 为5
                MARGIN=10;//定义常量margin值为10
            init();//执行初始化函数
            function init() {//定义初始化函数
                document.body.style.margin="0px";//给body设置margin为0
                bodyWidth=document.documentElement.clientWidth;//body的宽度是自适应的宽度
                colWidth=(bodyWidth-MARGIN*(COL-1))/COL;//列宽是（body宽度-margin*（列减一））/列数
                createUl();//执行createUl创建ul
                loadImage();//执行加载图片
            }

            function createUl() {//定义createUl函数，创建ul添加样式
                ul=ce("ul",{
                    listStyle:"none",
                    margin:"0px",
                    padding:"0px"
                });
                for(var i=0;i<COL;i++){//创建li添加样式
                    var li=ce("li",{
                        marginLeft:i===0?"0px":MARGIN+"px",
                        width:colWidth+"px",
                        float:"left"
                    });
                    minHeight.push(0);//给最小高度添加0
                    ul.appendChild(li);//在ul中添加li
                }
                document.body.appendChild(ul);//将ul添加到body中
                window.addEventListener("resize",resizeUl);//给window添加resize监听事件
            }
            function loadImage() {//定义loadImage函数
                var img=new Image();//定义图片
                img.addEventListener("load",loadHandler);//给img添加load（加载）监听事件
                img.src="./img/"+position+"-.jpg";
//                img.src=`./img/${position}-.jpg`//ES6字符串模板写法
            }
            function loadHandler(e) {//img加载事件函数
                var img=this.cloneNode(false);//复制子节点
                var scale=img.width/img.height;//宽高比
//            图片有两个宽高,一个是样式宽高(放在body中以后才可以获取),另一个是图片宽高,不放在页面中也可以获取
                img.width=colWidth;//img宽=列宽
                img.height=colWidth/scale;//img高=列宽/宽高比
                var min=Math.min.apply(null,minHeight);//定义最小值
                var index=minHeight.indexOf(min);//在minHeight数组中查找最小值，赋给index
                ul.children[index].appendChild(img);//将img放进li的每一项
                minHeight[index]+=img.height;//
                resizeUl();//执行resizeUl重置ul
                position++;
                if (position>79){
                    return;
                }
                this.src="./img/"+position+"-.jpg";
            }
            function resizeUl() {//定义resizeUl函数
                if (bodyWidth===document.documentElement.clientWidth) return;//如果body宽=页面内容宽度 跳出
                bodyWidth=document.documentElement.clientWidth;
                colWidth=(bodyWidth-MARGIN*(COL-1))/COL;
                for (var i=0;i<ul.children.length;i++){//获取li
                    var li=ul.children[i];//定义li
                    li.style.width=colWidth+"px";//li的宽就是列宽
                    var sum=0;//和为0
                    for (var j=0;j<li.children.length;j++){//获取img
                        var img=li.children[j];
                        var scale=img.width/img.height;//定义img的宽高比
                        img.width=colWidth;//img宽度=列宽
                        img.height=colWidth/scale;//img高度=列宽/宽高比
                        sum+=img.height;//img高度之和
                    }
                    minHeight[i]=sum;//记录每个li的高度
                }
            }
    </script>
</body>
</html>

 

懒加载是建立在瀑布流的基础上来实现的

main代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/Utils.js"></script>
</head>
<body>
    <script>
        /*
        *
        *  1\创建ul,创建li,创建指定数量的li,并且做浮动,设置各li的宽度
        *  2\创建一个数组,这个数组里面是统计每个li的当前高度
        *  3\创建图片,加载图片,设置图片宽度,获取图片高度
        *  4\寻找数组中最小高度的索引值,在li中找到这个索引值对应的列,
        *  5\将加载进来图片放入在这个列中并且累加高度存储在数组中对应的元素中
        *  6\继续加载新的图片,加载图片数量都完成后，让数值归3
        *
        * */
            var bodyWidth,colWidth,ul,img;//定义页面宽度，列宽，ul,img
            let {ce}=Utils;//解构赋值
            var minHeight=[],//定义最小高度为一数组
                position=3;//图片开始的名称为3
            const COL=5,//定义常量列的数量 为5
                MARGIN=10;//定义常量margin值为10
            init();//执行初始化函数
            function init() {//定义初始化函数
                document.body.style.margin="0px";//给body设置margin为0
                bodyWidth=document.documentElement.clientWidth;//body的宽度是自适应的宽度
                colWidth=(bodyWidth-MARGIN*(COL-1))/COL;//列宽是（body宽度-margin*（列减一））/列数
                createUl();//执行createUl创建ul
                loadImage();//执行加载图片
            }
        function scrollHandler() {//滑动事件
            //（页面内容高度-滚动隐藏到内容高度）<2*可视化窗口宽度
            if(document.documentElement.scrollHeight-document.documentElement.scrollTop<2*document.documentElement.clientHeight){
//                console.log("继续");
                window.removeEventListener("scroll",scrollHandler);//移除监听滚动
                addImage();//滚动到（页面内容高度-滚动隐藏到内容高度）<2*可视化窗口宽度  加图
            }
        }
            function createUl() {//定义createUl函数，创建ul添加样式
                ul=ce("ul",{
                    listStyle:"none",
                    margin:"0px",
                    padding:"0px"
                });
                for(var i=0;i<COL;i++){//创建li添加样式
                    var li=ce("li",{
                        marginLeft:i===0?"0px":MARGIN+"px",
                        width:colWidth+"px",
                        float:"left"
                    });
                    minHeight.push(0);//给最小高度添加0
                    ul.appendChild(li);//在ul中添加li
                }
                document.body.appendChild(ul);//将ul添加到body中
                window.addEventListener("resize",resizeUl);//给window添加resize监听事件
            }
            function loadImage() {//定义loadImage函数
                img=new Image();//定义图片
                img.addEventListener("load",loadHandler);//给img添加load（加载）监听事件
                img.src="./img/"+position+"-.jpg";
//                img.src=`./img/${position}-.jpg`//ES6字符串模板写法
            }
            function loadHandler(e) {//img加载事件函数
                var img=this.cloneNode(false);//复制子节点
                var scale=img.width/img.height;//宽高比
//            图片有两个宽高,一个是样式宽高(放在body中以后才可以获取),另一个是图片宽高,不放在页面中也可以获取
                img.width=colWidth;//img宽=列宽
                img.height=colWidth/scale;//img高=列宽/宽高比
                var min=Math.min.apply(null,minHeight);//定义最小值
                var index=minHeight.indexOf(min);//在minHeight数组中查找最小值，赋给index
                ul.children[index].appendChild(img);//将img放进li的每一项
                minHeight[index]+=img.height;//
                resizeUl();//执行resizeUl重置ul
                //（页面内容高度-滚动隐藏到内容高度）/可视化窗口高度     设置图片加载到 下方3倍自身可视化窗口的高度
                if((document.documentElement.scrollHeight-document.documentElement.scrollTop)/document.documentElement.clientHeight>=3){
                    window.addEventListener("scroll",scrollHandler);//添加滚动监听事件
                    return;
                }
                addImage();//正常加图    设置图片加载到 下方3倍自身可视化窗口的高度
            }

            function addImage() {
                position++;
                if (position>79){
                    position=3;//加载图片数量都完成后，让数值归3
                }
                img.src="./img/"+position+"-.jpg";
            }
            function resizeUl() {//定义resizeUl函数
                if (bodyWidth===document.documentElement.clientWidth) return;//如果body宽=页面内容宽度 跳出
                bodyWidth=document.documentElement.clientWidth;
                colWidth=(bodyWidth-MARGIN*(COL-1))/COL;
                for (var i=0;i<ul.children.length;i++){//获取li
                    var li=ul.children[i];//定义li
                    li.style.width=colWidth+"px";//li的宽就是列宽
                    var sum=0;//和为0
                    for (var j=0;j<li.children.length;j++){//获取img
                        var img=li.children[j];
                        var scale=img.width/img.height;//定义img的宽高比
                        img.width=colWidth;//img宽度=列宽
                        img.height=colWidth/scale;//img高度=列宽/宽高比
                        sum+=img.height;//img高度之和
                    }
                    minHeight[i]=sum;//和赋给最小高度
                }
            }
    </script>
</body>
</html>

 

joker.ma
关注
专栏目录
垂直瀑布流 懒加载
03-31
在这个"垂直瀑布流 懒加载"的案例中，我们主要探讨如何实现这种布局并结合懒加载技术提高页面性能。 首先，瀑布流的核心在于每个元素（通常是图片）的宽度固定，而高度自适应，这样可以确保相邻元素在垂直方向上...
js实现懒加载瀑布流
qq_51983617的博客
11-01 819
两种思路用js实现瀑布流式布局，包括懒加载以及自适应。 电脑端效果图 手机端效果图 没有过多注意整体样式，只是给图片加了边框。 方法一 整体思路是将一组图片信息放在一维数组中，计算有多少列，分成该长度的二维数组，遍历数组将图片放到页面中。 html+css <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Comp
js原生瀑布流并实现滚动懒加载（兼容IE8）
三哥玩前端
09-28 4237
最近公司接的新项目，客户要求要把图文列表的形式给写成瀑布流的形式，what？我仔细一想，应该不是很难，毕竟前端是万能的嘛，嘿嘿，之前我也听过瀑布流布局，比如淘宝，天猫等都是用的瀑布流布局，我不知道怎么生成的，于是我就上网找插件，有些插件还不错，不过我想自己写自己的代码，我看别人代码，主要看瀑布流的原理，然后根据原理自己写代码，然后再看慕课网之类的教学网站汲取经验，终于一个瀑布流被我搞出来了，本篇是...
瀑布流和懒加载
m0_52634705的博客
05-10 372
瀑布流和懒加载瀑布流懒加载 瀑布流 案例：瀑布流图片加载。 分析：将图片放入规定的列中，先进行图片预加载，每次放入图片时判断哪列的高度最小，然后将图片放到高度最小的列中。 如果是自适应页面，需要监听浏览器尺寸改变事件（resize），修改已经加载的列和图片的宽度，当浏览器出现滚动条。body的宽度改变，也需要修改已经加载的列和图片的宽度。 懒加载 分析：每次只加载可视窗口高度*3高的内容。 监听滚动条滚动事件，当滚动条滚动超过可视高度时，继续加载图片。 ...
小程序之图片瀑布流（最全实现方式，额外加送懒加载）
weixin_34279184的博客
05-11 1262
效果图 来来来，看啊看，外面的世界多好看， 效果图展示的是瀑布流布局 &amp;&amp; 懒加载的效果 数据 图片数据来源张鑫旭的网络日志 先说下我们的图片链接格式 所有的链接都是http://cued.xunlei.com/demos/publ/img/P_${name}.jpg这样的格式，我们需要改变name的值就行了，当name值小于10的时候，格式是00x,如002、003，大于10的...
“瀑布流式”图片懒加载代码示例
强子的专栏
12-16 6650
最近项目使用到了“懒加载”，现在更新一般，因为平时主要使移动端的开发所以库文件使用的是zepto.js 。当然也可以和jQuery 通用。代码如下：/** * Created by zhiqiang on 2015/10/14. * hpuhouzhiqiang@gmail.com * 图片的懒加载 **/ function loadImgLazy(node) { var lazyN
微信小程序-瀑布流布局案例
04-08
在这个“微信小程序-瀑布流布局案例”中，我们主要关注的是瀑布流布局这一设计模式在小程序中的应用。 瀑布流布局，又称流式网格布局，是一种常见的网页和移动应用界面设计方式。它模仿了图书陈列的方式，使得页面...
jquery随机图片瀑布流无限加载.zip
07-11
综上所述，"jQuery随机图片瀑布流无限加载.zip"中的案例展示了如何利用jQuery和相关技术实现一个动态、高效且具有良好用户体验的图片展示系统。通过学习这个案例，开发者可以掌握实现类似功能的关键技巧，并将其应用...
瀑布流案例
11-23
在这个案例中，我们将主要探讨如何使用JavaScript实现这一布局，并结合HTML和CSS来构建一个完整的瀑布流展示系统。 首先，我们需要获取页面中的关键元素。容器是所有图片盒子的父级，它的宽度决定了每行可以容纳...
无限加载图片瀑布流效果.zip
07-04
在JavaScript中实现无限加载图片的瀑布流效果，可以极大地提升用户体验，让用户无需翻页就能查看到更多的内容。 首先，我们需要引入jQuery库，这是实现这个特效的基础。jQuery简化了DOM操作、事件处理和动画制作，...
瀑布流实例及懒加载（echo.js）
weixin_30709929的博客
01-15 120
瀑布流布局： 图片等宽，不定高，按最低高度来顺序排列；实现方法：获取每次获取四行中最低高度对应的一行，将下一张加载的图片放在该位置，每次加载前都获取最低高度； ①请求图片的接口 地址此php文件 参数 cpage=1,2,3,4; 1 <?php 2 header('Content-type:text/html;charset="utf-8"'); 3 4 ...
实现图片懒加载和图片瀑布流的前端技巧
weixin_62981580的博客
10-25 622
在现代网页设计中，优化图像加载以提高性能是至关重要的。同时，图片瀑布流布局也已经成为许多网站的设计趋势之一。本文将介绍如何使用HTML、CSS和JavaScript实现图片懒加载和图片瀑布流图片懒加载是一种技术，它延迟加载页面上的图像，直到它们进入用户的视野范围。这有助于减少初始页面加载时间和带宽消耗。
图片瀑布流+懒加载+无限下滑
juju4的博客
12-07 242
【代码】图片瀑布流+懒加载+无限下滑。
ajax瀑布流布局,懒加载 & 瀑布流布局
weixin_32466193的博客
08-06 482
前几天星星零零的学习，终于搞定了懒加载和瀑布流布局，下面我们通过这篇文章一起学习和探讨一下~懒加载首先，什么是懒加载呢？原理？其原理是：将图片的 src 设置为统一的一张默认图片 / loading图 / logo / 空白图片(这样做会使网络请求只有一条哦)，可以将真实图片的 src 存储到 img 标签的自定义属性 data-src 中，当图片出现在用户视野 / 可视窗口中(需要展示出来)时，...
js原生瀑布流，懒加载，触底加载混合案例小记
qq_15253453的博客
10-20 415
js原生瀑布流，懒加载，触底加载
五分钟学会图片懒加载和瀑布流
2201_75866478的博客
10-25 193
因为获取的是一个伪数组，不可以用数组的方法，我们需要将其转换成数组，这里我用jquerry的makeArray方法转成数组，然后循环数组。在代码中，我们有多涨图片且不能同时在一个页面一次性展示，然后我们为图片添加自定义属性data-src来存储将要加载的路径。比如我们在逛淘宝时，淘宝整个页面的图片并不是一下子就全部加载出来的，而是我们滚动到哪就加载哪里的图片。代码编写完成，我们可以f12检查network实时刷新的数据可以发现，只有在可是界面的图片才会被加载。在需要的时候加载图片。
微信小程序开发 懒加载+瀑布流+排序功能
最新发布
qq_68695044的博客
05-23 644
来控制列数，但很快发现，这样的瀑布流的顺序是从上到下后再从左到右，与原型图的要求并不符合，况且在加上懒加载后，由于整体的数据数量发生了变化，整个瀑布流相当于又重新加载了一次，不仅不能实现功能，还加大了加载的压力。最后需要注意的是，在触发切换事件导致排序发生变化时，应当手动将左右两侧的列表的高度清空，防止重新识别高度时产生的错判导致左右换位。在小程序的开发过程中，遇到了这样的功能需求：在保持瀑布流布局的情况下，使用懒加载来渲染页面，并且要求对其中的属性添加排序功能。注意需要为左右两个列表设置浮动。
jquery实现瀑布流效果＋下拉加载新数据
小白变怪兽
12-07 8602
瀑布流 下拉加载 下拉加载数据 数据 jquery 模版
实现瀑布流（懒加载）
upup
01-20 479
<!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-U...
98分毕设项目源码-微信小程序瀑布流布局
- **瀑布流布局**：瀑布流布局是一种常用的网页布局方式，它以列的形式展示内容，列与列之间无固定宽度，且高度不一，内容会随着用户的滚动而动态加载。 - **后端Java开发**：后端开发主要负责服务器、应用或数据库...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值