JavaScript实现无穷滚动加载数据
程序员文章站
2023-11-22 08:28:22
首先实现滚动要借助onscroll事件处理程序。
无穷滚动就是滑动滚动条，实现数据块的无穷加载。
我们以瀑布流的布局来实现无穷加载。瀑布流就是一些等宽不等高...
首先实现滚动要借助onscroll事件处理程序。
无穷滚动就是滑动滚动条，实现数据块的无穷加载。
我们以瀑布流的布局来实现无穷加载。瀑布流就是一些等宽不等高的数据块布局。在滚动条下拉时，它会进行加载。那么问题就是在判断什么时候应该加载。
我们首先应该明白瀑布流布局的特点。它将下一个图片总是放在当前列数最低的那一列。所以当加载最后一个蓝色的图片时，也就无疑是最后一个图片了。所以要判断该图片加载到什么程度来触发滚动事件。
图上灰色的表示页面的大小，后面蓝色边框表示窗口的大小。当拖动滚动条时，灰色部分上移。我们希望页面最后一个图片（蓝色图片）加载一半时触发滚动事件。那么就要形成参照。
下来写代码：
//检测是否具备滚动条加载数据块的条件
function checkscrollslide(){
var oparent = document.getelementbyid('main');
var oboxs = getbyclass(oparent,'box');
var scrollh = document.body.scrolltop || document.documentelement.scrolltop + document.body.clientheight || document.documentelement.clientheight;
var lastboxh = oboxs[oboxs.length - 1].offsettop + math.floor(oboxs[oboxs.length - 1].offsetheight/2);
return (lastboxh < scrollh )? true : false;
}
getclass是根据类名查找元素集合的自己写的函数，待会儿会附上源码
我们要进行加载的数据块的格式是这样的.每个图片被一个class= pic的div包裹。最后整体属于父元素main
<div id = "main"> <div class = "box"> <div class = "pic"> <img src = "images/0.jpg"> </div> </div> <div class = "box"> <div class = "pic"> <img src = "images/1.jpg"> </div> </div> <div class = "box"> <div class = "pic"> <img src = "images/2.jpg"> </div> </div> <div>
首先我们要加载的数据块应该是从后台传过来的，在这里我们用json模拟一下就可以：
var datain = {"data":[{"src":'0.jpg'},{"src":'1.jpg'},{"src":'2.jpg'},{"src":'3.jpg'},{"src":'4.jpg'},{"src":'5.jpg'}]};
比如这个就是后台传过来的数据。
上面的函数返回一个布尔值，当为true时，触发滚动事件。
window.onscroll = function(){
var oparent = document.getelementbyid('main');
//当满足加载条件时，就要向页面中加载数据块
if(checkscrollslide){
for(var i = 0; i< datain.data.length; i++){
var obox = document.createelement('div');
obox.classname = 'box';
oparent.appendchild(obox);
var opic = document.createelement('div');
opic.classname = 'pic';
obox.appendchild(opic);
var oimg = document.createelement('img');
oimg.src = './images/'+datain.data[i].src;
opic.appendchild(oimg);
}
waterfull('main','box');
}
}
}
附上源码：
css和html
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<script src = "./jswaterfll.js"></script>
<title>瀑布流布局</title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
#main{
position: relative;
}
.box{
/* display: inline-block;*/
padding: 15px 0px 0px 15px;
float: left;
}
.pic{
padding: 10px;
border-radius: 5px;
border:1px solid #ccc;
box-shadow: 0 0 5px #ccc;
}
.pic img{
width: 165px;
height: auto;
}
</style>
</head>
<body>
<div id = 'main'>
<div class = "box">
<div class = "pic">
<img src = "images/3.jpg">
</div>
</div>
<div class = "box">
<div class = "pic">
<img src = "images/4.jpg">
</div>
</div>
<div class = "box">
<div class = "pic">
<img src = "images/20.jpg">
</div>
</div>
<div class = "box">
<div class = "pic">
<img src = "images/21.jpg">
</div>
</div>
<div class = "box">
<div class = "pic">
<img src = "images/2.jpg">
</div>
</div>
<div class = "box">
<div class = "pic">
<img src = "images/3.jpg">
</div>
</div>
<div class = "box">
<div class = "pic">
<img src = "images/4.jpg">
</div>
</div>
<div class = "box">
<div class = "pic">
<img src = "images/5.jpg">
</div>
</div>
<div class = "box">
<div class = "pic">
<img src = "images/6.jpg">
</div>
</div>
<div class = "box">
<div class = "pic">
<img src = "images/7.jpg">
</div>
</div>
<div class = "box">
<div class = "pic">
<img src = "images/8.jpg">
</div>
</div>
<div class = "box">
<div class = "pic">
<img src = "images/9.jpg">
</div>
</div>
<div class = "box">
<div class = "pic">
<img src = "images/10.jpg">
</div>
</div>
<div class = "box">
<div class = "pic">
<img src = "images/11.jpg">
</div>
</div>
<div class = "box">
<div class = "pic">
<img src = "images/17.jpg">
</div>
</div>
<div class = "box">
<div class = "pic">
<img src = "images/18.jpg">
</div>
</div>
<div class = "box">
<div class = "pic">
<img src = "images/19.jpg">
</div>
</div>
<div class = "box">
<div class = "pic">
<img src = "images/4.jpg">
</div>
</div>
<div class = "box">
<div class = "pic">
<img src = "images/5.jpg">
</div>
</div>
<div class = "box">
<div class = "pic">
<img src = "images/6.jpg">
</div>
</div>
<div class = "box">
<div class = "pic">
<img src = "images/7.jpg">
</div>
</div>
<div class = "box">
<div class = "pic">
<img src = "images/8.jpg">
</div>
</div>
<div class = "box">
<div class = "pic">
<img src = "images/11.jpg">
</div>
</div>
<div class = "box">
<div class = "pic">
<img src = "images/12.jpg">
</div>
</div>
<div class = "box">
<div class = "pic">
<img src = "images/13.jpg">
</div>
</div>
<div class = "box">
<div class = "pic">
<img src = "images/14.jpg">
</div>
</div>
<div class = "box">
<div class = "pic">
<img src = "images/15.jpg">
</div>
</div>
<div class = "box">
<div class = "pic">
<img src = "images/16.jpg">
</div>
</div>
<div class = "box">
<div class = "pic">
<img src = "images/17.jpg">
</div>
</div>
<div class = "box">
<div class = "pic">
<img src = "images/18.jpg">
</div>
</div>
<div class = "box">
<div class = "pic">
<img src = "images/19.jpg">
</div>
</div>
<div class = "box">
<div class = "pic">
<img src = "images/20.jpg">
</div>
</div>
<div class = "box">
<div class = "pic">
<img src = "images/21.jpg">
</div>
</div>
</div>
</body>
</html>
js代码：
window.onload = function(){
waterfull('main','box');
var datain = {"data":[{"src":'0.jpg'},{"src":'1.jpg'},{"src":'2.jpg'},{"src":'3.jpg'},{"src":'4.jpg'},{"src":'5.jpg'}]};
window.onscroll = function(){
var oparent = document.getelementbyid('main');
if(checkscrollslide){
for(var i = 0; i< datain.data.length; i++){
var obox = document.createelement('div');
obox.classname = 'box';
oparent.appendchild(obox);
var opic = document.createelement('div');
opic.classname = 'pic';
obox.appendchild(opic);
var oimg = document.createelement('img');
oimg.src = './images/'+datain.data[i].src;
opic.appendchild(oimg);
}
waterfull('main','box');
}
}
}
function waterfull(parent,children){
var oparent = document.getelementbyid(parent);
//var oboxs = parent.queryselectorall(".box");
var oboxs = getbyclass(oparent,children);
//计算整个页面显示的列数
var oboxw = oboxs[0].offsetwidth;
var cols = math.floor(document.documentelement.clientwidth/oboxw);
//设置main的宽度，并且居中
oparent.style.csstext = 'width:'+oboxw * cols +'px; margin: 0 auto';
//找出高度最小的图片，将下一个图片放在下面
//定义一个数组，存放每一列的高度，初始化存的是第一行的所有列的高度
var arrh = [];
for(var i = 0; i< oboxs.length ; i++){
if(i < cols){
arrh.push(oboxs[i].offsetheight);
}
else{
var minh = math.min.apply(null,arrh);
var minindex = getminhindex(arrh,minh);
oboxs[i].style.position = 'absolute';
oboxs[i].style.top= minh + 'px';
//oboxs[i].style.left = minindex * oboxw + 'px';
oboxs[i].style.left = oboxs[minindex].offsetleft+'px';
arrh[minindex] += oboxs[i].offsetheight;
}
}
}
function getbyclass(parent,classname){
var boxarr = new array();//用来获取所有class为box的元素
oelement = parent.getelementsbytagname('*');
for (var i = 0; i <oelement.length; i++) {
if(oelement[i].classname == classname){
boxarr.push(oelement[i]);
}
};
return boxarr;
}
//获取当前最小值得下标
function getminhindex(array,min){
for(var i in array){
if(array[i] == min)
return i;
}
}
//检测是否具备滚动条加载数据块的条件
function checkscrollslide(){
var oparent = document.getelementbyid('main');
var oboxs = getbyclass(oparent,'box');
var scrollh = document.body.scrolltop || document.documentelement.scrolltop + document.body.clientheight || document.documentelement.clientheight;
var lastboxh = oboxs[oboxs.length - 1].offsettop + math.floor(oboxs[oboxs.length - 1].offsetheight/2);
return (lastboxh < scrollh )? true : false;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。