微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

JavaScript实现无穷滚动加载数据

首先实现滚动要借助onscroll事件处理程序。

无穷滚动就是滑动滚动条,实现数据块的无穷加载。

我们以瀑布流的布局来实现无穷加载。瀑布流就是一些等宽不等高的数据块布局。在滚动条下拉时,它会进行加载。那么问题就是在判断什么时候应该加载。

我们首先应该明白瀑布流布局的特点。它将下一个图片总是放在当前列数最低的那一列。所以当加载最后一个蓝色的图片时,也就无疑是最后一个图片了。所以要判断该图片加载到什么程度来触发滚动事件。 图上灰色的表示页面的大小,后面蓝色边框表示窗口的大小。当拖动滚动条时,灰色部分上移。我们希望页面最后一个图片(蓝色图片)加载一半时触发滚动事件。那么就要形成参照。

下来写代码

rush:js;"> //检测是否具备滚动条加载数据块的条件 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

rush:xhtml;">
Box">
Box">
Box">

首先我们要加载的数据块应该是从后台传过来的,在这里我们用json模拟一下就可以:

比如这个就是后台传过来的数据。

上面的函数返回一个布尔值,当为true时,触发滚动事件。

rush:js;"> 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';
o<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>.appendChild(opic);

var oImg = document.createElement('img');
oImg.src = './images/'+DataIn.data[i].src;
opic.appendChild(oImg);

}
waterFull('main','Box');
}
}
}

附上源码:

css和html

rush:xhtml;">

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐