纯JS实现懒加载+瀑布流布局

瀑布流布局一般用于图片布局，其视觉表现为参差不齐的多栏布局，随着页面的滑动，会不断加载新的图片。

懒加载主要用于实现提高系统的响应速度。对于图片比较多的网页，如果一次性加载出所有的图片，会导致系统的加载时间较长，用户等待时间也很长。而懒加载则在用户需要查看图片的时候才加载他，从而使系统可以更快的加载图片。
懒加载主要的实现方式是：先设置所有的图片的src都为同一个背景图片（如loading图片），同时每个图片都设置一个属性存储真正的图片路径，然后在图片加载到屏幕中是，将真正图片的路径传给src。

HTML代码：

<body><div id='container'><div class='box'><img dataSrc="images/1.jpg" src="data:images/loading.gif"></div><div class='box'><img dataSrc="images/2.jpg" src="data:images/loading.gif"></div><div class='box'><img dataSrc="images/3.jpg" src="data:images/loading.gif"></div><div class='box'><img dataSrc="images/4.jpg" src="data:images/loading.gif"></div><div class='box'><img dataSrc="images/5.jpg" src="data:images/loading.gif"></div><div class='box'><img dataSrc="images/6.jpg" src="data:images/loading.gif"></div><div class='box'><img dataSrc="images/7.jpg" src="data:images/loading.gif"></div><div class='box'><img dataSrc="images/8.jpg" src="data:images/loading.gif"></div><div class='box'><img dataSrc="images/9.jpg" src="data:images/loading.gif"></div><div class='box'><img dataSrc="images/10.jpg" src="data:images/loading.gif"></div><div class='box'><img dataSrc="images/11.jpg" src="data:images/loading.gif"></div><div class='box'><img dataSrc="images/12.jpg" src="data:images/loading.gif"></div><div class='box'><img dataSrc="images/13.jpg" src="data:images/loading.gif"></div><div class='box'><img dataSrc="images/14.jpg" src="data:images/loading.gif"></div><div class='box'><img dataSrc="images/15.jpg" src="data:images/loading.gif"></div><div class='box'><img dataSrc="images/16.jpg" src="data:images/loading.gif"></div><div class='box'><img dataSrc="images/17.jpg" src="data:images/loading.gif"></div><div class='box'><img dataSrc="images/18.jpg" src="data:images/loading.gif"></div><div class='box'><img dataSrc="images/19.jpg" src="data:images/loading.gif"></div><div class='box'><img dataSrc="images/20.jpg" src="data:images/loading.gif"></div><div class='box'><img dataSrc="images/21.jpg" src="data:images/loading.gif"></div><div class='box'><img dataSrc="images/22.jpg" src="data:images/loading.gif"></div><div class='box'><img dataSrc="images/23.jpg" src="data:images/loading.gif"></div><div class='box'><img dataSrc="images/24.jpg" src="data:images/loading.gif"></div><div class='box'><img dataSrc="images/25.jpg" src="data:images/loading.gif"></div><div class='box'><img dataSrc="images/26.jpg" src="data:images/loading.gif"></div><div class='box'><img dataSrc="images/27.jpg" src="data:images/loading.gif"></div><div class='box'><img dataSrc="images/28.jpg" src="data:images/loading.gif"></div><div class='box'><img dataSrc="images/29.jpg" src="data:images/loading.gif"></div><div class='box'><img dataSrc="images/30.jpg" src="data:images/loading.gif"></div><div class='box'><img dataSrc="images/31.jpg" src="data:images/loading.gif"></div><div class='box'><img dataSrc="images/32.jpg" src="data:images/loading.gif"></div><div class='box'><img dataSrc="images/33.jpg" src="data:images/loading.gif"></div><div class='box'><img dataSrc="images/34.jpg" src="data:images/loading.gif"></div><div class='box'><img dataSrc="images/35.jpg" src="data:images/loading.gif"></div></div>
</body>

CSS代码：

body{padding: 0;margin: 0;
}#container{position: relative;
}
#container .box{float: left;border: 1px solid #CCC;border-radius: 5px;background-color: #eee;padding: 10px;height: auto;
}
img{vertical-align: middle;width: 210px;display: block;
}

JS代码：

window.addEventListener('load',winLoad,false)function winLoad(){var container=document.getElementById('container');var box=document.getElementsByClassName('box');var img=document.getElementsByTagName('img');var clientW=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth; //获取浏览器宽度var gaps=10;   //每个图片间间距10pxvar boxW=box[0].offsetWidth+gaps; //每一栏的宽度相等，因此使用box[0]的宽度即可代表box宽度，加上间距宽度为每一栏box占用宽度var cols=parseInt(clientW/boxW); //根据浏览器宽度适应列数imgLocation(img);  //页面加载完成即显示部分图片window.onscroll = function(){imgLocation(img); //滚动过程中动态加载图片};function waterfall(ele,col,eleWidth){container.style.cssText='width:'+boxW*cols+'px;margin:0 auto';  //使页面居中显示var heightArr=[]; //记录每一列的高度for (var i = 0; i < ele.length; i++) {if (i<col) {  //第一行中top为0，每一列高度为box的offsetHeighele[i].style.position='absolute';ele[i].style.top=0;ele[i].style.left=i*eleWidth+'px';heightArr.push(ele[i].offsetHeight);}else{var minHeight=Math.min.apply(null,heightArr);  //获取列高度的最小值var minIndex=heightArr.indexOf(minHeight);   //获取高度最小的那一列ele[i].style.position='absolute';ele[i].style.top=minHeight+gaps+'px';ele[i].style.left=minIndex*eleWidth+'px';heightArr[minIndex]+=ele[i].offsetHeight+gaps;  //添加图片后，当前列高度加上box高度和gap高度}}
}function imgLocation(arr){for (var i = 0; i < arr.length; i++) {var scrollTop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop;var clientH=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;var imgTop=getTop(arr[i]); if(imgTop<scrollTop+clientH&&imgTop>scrollTop&& !arr[i].isLoad){ //判断图片是否在屏幕中arr[i].isLoad=true; //标记图片是否已经加载过了afterLoad(arr[i]);  }}
}function afterLoad(obj){var url=obj.getAttribute('dataSrc');obj.src=url;  //显示图片waterfall(box,cols,boxW);
}function getTop(img){var offsetTop=0;do{offsetTop+=img.offsetTop;img=img.offsetParent;}while(img.nodeName!='BODY');//offsetTop是相对于offserParent的，因此用offseParentreturn offsetTop;
}
}

由于在页面加载完成后才进行图片加载，因此此瀑布流布局在页面刚加载完成时布局不是很完美，需要滚动页面后正常布局。

纯JS实现懒加载+瀑布流布局相关推荐

ajax瀑布流布局,懒加载瀑布流布局
前几天星星零零的学习,终于搞定了懒加载和瀑布流布局,下面我们通过这篇文章一起学习和探讨一下~ 懒加载首先,什么是懒加载呢?原理? 其原理是:将图片的 src 设置为统一的一张默认图片 / loadi ...
基于jquery响应式网站图片无限加载瀑布流布局
分享一款效果非常酷的jQuery瀑布流布局无限加载图片效果.整个页面采用响应式布局,图片采用jQuery.Lazyload延时加载技术,提升整个页面的加载速度.效果图如下: 在线预览源码下载实 ...
AJAX+json+jquery实现预加载瀑布流布局
AJAX+json+jquery实现预加载瀑布流布局转载于:https://www.cnblogs.com/zhujiabin/p/4860954.html
js图片懒加载的第二种方式
这种方式是图片按照顺序一张一张的加载直到所有图片都加载完成 html 同样的要让图片进行懒加载,路径引用就得用 data-src <ul><li><img data-sr ...
[js] 图片懒加载
懒加载使用场景在一些图片量比较大的场景(电商首页,小程序首页等),如果我们打开页面时就加载所有的图片,那势必会导致页面的卡顿以及白屏,给用户不好的体验,导致用户流失. 但是我们仔细想一下,用户真的需 ...
【UN-JS-工具类】懒加载的实现 -- 两种方式 --- 一种5行JS实现懒加载
懒加载的实现 (两种方式) 方法一:scroll + getBoundingClientRect 方法二:IntersectionObserver(推荐) codepen 展示 lazyLoad-sc ...
js 图片懒加载最好的方法
图片懒加载多种方法第一种是循环遍历img属性,判断每一个img离顶部的高度减去屏幕的高度是否大于0,小于0的话就就出现在屏幕上了,我们就更改属性显示图片,这种有弊端,因为是监听滚动条,相等于实时监 ...
js图片懒加载原理、实现及节流优化
1.懒加载原理在图片没有进入可视区域时,先给的src一个默认加载的图片,这样浏览器就不会发送请求了,等到图片进入可视区域再把真实的图片路径data-src给src. 2.具体实现 1. 效果 2. ...
懒加载实践--js图片懒加载及优化
一.前言为啥要对图片使用懒加载?我们首先来聊聊这个问题,对于页面来说架子啊速度影响着最大的就是图片,一张普通的图片可以达到4-5M的大小,而代码压缩也就只有几十KB.当页面图片过多的时候,页面加载速 ...

纯JS实现懒加载+瀑布流布局

纯JS实现懒加载+瀑布流布局相关推荐

最新文章

热门文章