JS瀑布流下拉加载数据效果
摘要：前端开发工作流工具 菜鸟前端开发的的工作 前端开发工作好找吗 由于没有数据就没有用到ajax，用setTimeout()函数代替了一下，原理差不多的。 html 代码 <!doctype html> <html> <head> <……
前端开发工作流工具 菜鸟前端开发的的工作 前端开发工作好找吗
由于没有数据就没有用到ajax，用setTimeout()函数代替了一下，原理差不多的。
html 代码
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>瀑布流形式one</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 * (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;
}
}
</script>
</head>
</p>
<p>
<body>
<h1 style=”text-align: center;”>模拟瀑布流下拉加载数据效果</h1>
<div class=”box” id=”box”>
</div>
<div class=”loadInfo” id=”loadInfo”>
<script type=”text/javascript”>
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();
}
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>
</body>
</html>
前端开发找不到工作怎么办 web前端开发工作累吗 前端开发的工作要求
» 本文来自：前端开发者 » 《JS瀑布流下拉加载数据效果》
» 本文链接地址：https://www.rokub.com/5838.html
» 您也可以订阅本站：https://www.rokub.com
近期评论