eyoucms实现页面瀑布流自动加载
2020-05-27
eyoucms页面瀑布流自动加载是需要点按钮然后加载的，下面这代码可以实现瀑布流自动加载。
1、html代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <link rel="stylesheet" type="text/css" href="../css/autoAdd.css"/> <script type="text/javascript" src="../js/autoAdd.js" charset="UTF-8" ></script> <body> <div id="all"> <div > 1 </div> </div> </body> </html>
2、autoAdd.css代码
*{
padding: 0px;
margin: 0px;
}
#all{
width: 600px;
margin: 0 auto;
text-align: center;
border: 1px solid red;
position: relative;
}
#all div{
/*top: 20px;*/
width: 200px;
height: 100px;
border: 1px solid blue;
margin: 10px 34%;
text-align: center;
position: absolute;
}3、autoAdd.js代码：
window.onload=function(){
all=document.getElementById("all");
getData;//注意不能置为null
num=1;
var lis=all.getElementsByTagName("div");
// var lastDiv=lis[lis.length-1];
// console.log(lastDiv);
// console.log(getData);
// console.log(getData.eleT(lastDiv).y);
// console.log(getData.scrollT().y);
// console.log(getData.clientH().y);
/**
* 最好是每进行一步就进行验证，否则很难找到问题所在
*/
}
window.onscroll=function(){
Add();
}
function Add(){
if(isCheckAdd()){
var newDiv=document.createElement("div");
newDiv.innerHTML=num+1;
newDiv.style.top=num*(120)+"px";
num++;
all.appendChild(newDiv);
}
}
function isCheckAdd(){
var lis=all.getElementsByTagName("div");
console.log("length="+lis.length)
var lastDiv=lis[lis.length-1];
console.log("lastDiv的Top="+document.defaultView.getComputedStyle(lastDiv,null).top);
return (getData.eleT(lastDiv).y<=getData.scrollT().y+getData.clientH().y)?true:false;
}
getData={
/**
*
* @param {Object} obj
* 获取all最后一个元素的top和他自身的一半高度
*/
eleT:function(obj){//最好用？而不是用||
var marginTop=obj.style.top?
obj.style.top:document.defaultView.getComputedStyle(obj,null).marginTop;
marginTop=parseInt(marginTop);
console.log("marginTop="+marginTop)
var height=obj.style.height||document.defaultView.getComputedStyle(obj,null).height;
height=parseInt(height);
console.log("height="+height)
var halfH=Math.ceil(height/2);
var eleT=marginTop+halfH;
return new this.result(parseInt(eleT));
}
,
/**
* 获取滚动条的top
*/
scrollT:function(){
var scrollT=document.documentElement.scrollTop?
document.documentElement.scrollTop:document.body.scrollTop;
var scrollL=document.documentElement.scrollLeft?
document.documentElement.scrollLeft:document.body.scrollLeft;
console.log("scrollT="+scrollT+" : scrollL="+scrollL);
return new this.result(scrollT);
},
/**
* 获取浏览器的可见区域的height
*/
clientH:function(){
var clientH=document.documentElement.clientHeight;
console.log("clientH="+clientH);
return new this.result(clientH);
},
result:function(y){
this.y=y;
}
}4、效果，将浏览高度缩小于第一个格子高度试下。
另外一种方法是群里有朋友搞的，说是直接扔上去就行，还没做测试，先做一个记录。
window.onscroll = function () {
if (((document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : (document.body ? document.body.scrollTop : 0)) + ((document.body.clientHeight && document.documentElement.clientHeight) ? Math.min(document.body.clientHeight, document.documentElement.clientHeight) : Math.max(document.body.clientHeight, document.documentElement.clientHeight)) + 100 > Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)) {
var pages = document.getElementsByClassName('next-page');for (var i = pages.length; i > 0; i--) {
var page = pages[i - 1].getElementsByTagName('a');
if (page.length > 0 && page[0].getAttribute('data-page')) {
page[0].click(); break; }}}};