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下拉滚动条瀑布流加载数据代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容