eyoucms实现页面瀑布流自动加载
2020-11-13
eyoucms页面瀑布流自动加载是需要点按钮然后加载的，下面这代码可以实现瀑布流自动加载。
1、html代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!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代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | *{ 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代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | 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、效果，将浏览高度缩小于第一个格子高度试下。
另外一种方法是群里有朋友搞的，说是直接扔上去就行，还没做测试，先做一个记录。
1 2 3 4 5 6 | 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; }}}}; |