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

回复

我来回复
  • 暂无回复内容