html下拉加载数据,JS瀑布流下拉加载数据效果

/p>

瀑布流形式one

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;

}

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;

}

}

模拟瀑布流下拉加载数据效果

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 = “正在加载…”;

}

}