js下拉滚动条瀑布流加载数据代码实例
分享一段代码实例,并详细介绍一下它的实现过程。
此代码模拟实现了,拖动滚动条实现瀑布流方式加载数据的效果。
当然这里并没有真正的加载远程服务器的数据,模拟实现的,实际应用中只要做相应的更改即可。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> html, body { background: #ccc; padding: 0px; margin: 0px; } .box { width: 960px; margin: 0 auto; overflow: auto; } .childDom { background: #fff; transition: all .5s ease; } .childDom:hover { transform: scale(1.1); } .loadInfo { text-align: center; font-size: 2em; } </style> <script type="text/javascript"> var Funs = function(newObj) { var Obj = { width: 240, height: 400, rowsNum: 4, dataNum: 22, boxDom: "box", num: 10, class: "childDom" }; var topNum = 0, leftNum = 0; Funs.prototype.setEle = function() { var boxDom = document.getElementById(Obj.boxDom); var boxWidth = Obj.width * Obj.rowsNum + Obj.num * (Obj.rowsNum - 1); if (Obj.dataNum / Obj.rowsNum !== parseInt(Obj.dataNum / Obj.rowsNum)) { var boxHeight=Obj.height*(parseInt((Obj.dataNum/Obj.rowsNum))+1)+Obj.num*parseInt(Obj.dataNum/Obj.rowsNum); } else { var boxHeight=Obj.height*(Obj.dataNum/Obj.rowsNum)+Obj.num*((Obj.dataNum/Obj.rowsNum)-1); } boxDom.style.width = boxWidth + "px"; boxDom.style.height = boxHeight + "px"; return boxDom; } Funs.prototype.creChildEle = function(n) { var creEle = document.createElement("div"); creEle.className = Obj.class; creEle.innerHTML = n; creEle.style.float = "left"; creEle.style.position = "absolute"; creEle.style.width = Obj.width + "px"; creEle.style.height = Obj.height + "px"; creEle.style.marginLeft = leftNum + "px"; creEle.style.marginTop = topNum + "px"; return creEle; } Funs.prototype.compute = function(n) { if ((n + 1) / Obj.rowsNum == parseInt((n + 1) / Obj.rowsNum)) { leftNum = 0; topNum += Obj.height + Obj.num; } else { leftNum += Obj.width + Obj.num; topNum = topNum; } } Funs.prototype.init = function() { if (newObj !== null) { Obj = newObj; } var dom = this.setEle(); for (var i = 0; i < Obj.dataNum; i++) { var creEle = this.creChildEle(i); this.compute(i); dom.appendChild(creEle); } } } //获取滚动高度、文档高度、浏览器视口高度 var heightFuns = function() { //获取滚动高度 heightFuns.prototype.getScrollTop = function() { var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0; if (document.body) { bodyScrollTop = document.body.scrollTop; } if (document.documentElement) { documentScrollTop = document.documentElement.scrollTop; } scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop; return scrollTop; } //获取文档的总高度 heightFuns.prototype.getScrollHeight = function() { var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight; if (document.body) { bodyScrollHeight = document.body.scrollHeight; } if (document.documentElement) { documentScrollHeight = document.documentElement.scrollHeight; } scrollHeight=(bodyScrollHeight-documentScrollHeight>0)?bodyScrollHeight:documentScrollHeight; return scrollHeight; } //获取浏览器视口的高度 heightFuns.prototype.getWindowHeight = function() { var windowHeight = 0; if (document.compatMode == 'CSS1Compat') { windowHeight = document.documentElement.clientHeight; } else { windowHeight = document.body.clientHeight; } return windowHeight; } } var data = { width: 250, height: 300, rowsNum: 3, dataNum: 0, boxDom: "box", num: 20, class: "childDom" }; function showData() { data.dataNum += 10; var creObj = new Funs(data); creObj.init(); } window.onload = function () { showData(); var heightObj = new heightFuns(); window.onscroll = function () { var loadDom = document.getElementById("loadInfo"); if (heightObj.getScrollTop() == heightObj.getScrollHeight() - heightObj.getWindowHeight()) { setTimeout(showData, 1000); loadDom.innerHTML = "正在加载..."; } } } </script> </head> <body> <div class="box" id="box"> </div> <div class="loadInfo" id="loadInfo"></div> </body> </html>
上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
(1).var Funs = function(newObj) {},构造函数的作用后面会介绍到,参数是一个对象,自定义的一些参数。
(2).var Obj = {
width: 240,
height: 400,
rowsNum: 4,
dataNum: 22,
boxDom: "box",
num: 10,
class: "childDom"
},此对象规定了一些默认参数。
width规定div的宽度。
height规定div元素的高度。
rowsNum:规定一行有几个div元素。
dataNum:规定一开始显示几个div元素。
boxDom:规定容器div的id属性值。
num:规定div元素的之间的距离。
class: "childDom",规定一个class样式类名称。
(3).var topNum = 0,leftNum = 0,规定上外边距和左外边距的初始值。
(4). Funs.prototype.setEle = function() {},此函数用来设置容器div元素的尺寸。
(5).var boxDom = document.getElementById(Obj.boxDom),获取容器元素对象。
(6).var boxWidth = Obj.width * Obj.rowsNum + Obj.num * (Obj.rowsNum - 1),设置容器div元素的宽度。
这个很好理解,div的宽度乘以每行div的数量再加上div元素之间的距离。
(7).if (Obj.dataNum / Obj.rowsNum !== parseInt(Obj.dataNum / Obj.rowsNum)) {
var boxHeight=Obj.height*(parseInt((Obj.dataNum/Obj.rowsNum))+1)+Obj.num*(Obj.dataNum/Obj.rowsNum);
} else {
var boxHeight=Obj.height*(Obj.dataNum/Obj.rowsNum)+Obj.num*((Obj.dataNum/Obj.rowsNum)-1);
},用来设置容器div元素的高度。
if语句后面判断初始显示div数目是否整除每行的div数目。如果没有整除的话,会比整除的情况多出一行。
那么计算的时候会有一些区别。
(4).boxDom.style.width = boxWidth + "px";
boxDom.style.height = boxHeight + "px";
return boxDom;
设置元素的长度和宽度,并返回此元素对象。
(5).Funs.prototype.creChildEle = function(n) {
var creEle = document.createElement("div");
creEle.className = Obj.class;
creEle.innerHTML = n;
creEle.style.float = "left";
creEle.style.position = "absolute";
creEle.style.width = Obj.width + "px";
creEle.style.height = Obj.height + "px";
creEle.style.marginLeft = leftNum + "px";
creEle.style.marginTop = topNum + "px";
return creEle;
},创建div元素,并且设置相关的css属性值。
(6).Funs.prototype.compute = function(n) {
if ((n + 1) / Obj.rowsNum == parseInt((n + 1) / Obj.rowsNum)) {
leftNum = 0;
topNum += Obj.height + Obj.num;
} else {
leftNum += Obj.width + Obj.num;
topNum = topNum;
}
},计算div元素的左外边距和右外边距的值。
(7).Funs.prototype.init = function() {
if (newObj !== null) {
Obj = newObj;
}
var dom = this.setEle();
for (var i = 0; i < Obj.dataNum; i++) {
var creEle = this.creChildEle(i);
this.compute(i);
dom.appendChild(creEle);
}
}进行一些初始化操作。
(8).var heightFuns = function() {},获取滚动高度、文档高度、浏览器视口高度。
内部的相关属性的应用可以参阅相关阅读。
(9).var data = {
width: 250,
height: 300,
rowsNum: 3,
dataNum: 0,
boxDom: "box",
num: 20,
class: "childDom"
},自定义的相关数据参数。
(10).function showData() {
data.dataNum += 10;
var creObj = new Funs(data);
creObj.init();
},此函数可以显示默认的div,比如本例中默认显示10个div元素。
(11).window.onload = function () {},当文档内容加载完毕再去执行函数中的代码。
(12).showData(),显示默认div。
(13).var heightObj = new heightFuns(),创建对象实例。
(14).window.onscroll = function () {},注册onscroll事件处理函数。
(15).var loadDom = document.getElementById("loadInfo"),获取对应id的元素对象。
(16).if (heightObj.getScrollTop() == heightObj.getScrollHeight() - heightObj.getWindowHeight()) {
setTimeout(showData, 1000);
loadDom.innerHTML = "正在加载...";
},首先判断页面是否拖动到底部。
使用定时器函数延迟1秒执行,是为了模拟从服务器加载数据的延迟效果。
在延迟期间显示"正在加载...".
二.相关阅读:
(1).scrollTop可以参阅document.documentElement.scrollTop浏览器兼容一章节。
(2).scrollHeight可以参阅scrollHeight和scrollWidth浏览器兼容一章节。
(3).clientHeight可以参阅clientHeight一章节。
js下拉滚动条瀑布流加载数据代码实例,这样的场景在实际项目中还是用的比较多的,关于js下拉滚动条瀑布流加载数据代码实例就介绍到这了。
js下拉滚动条瀑布流加载数据代码实例属于前端实例代码,有关更多实例代码大家可以查看。