EyouCms

EyouCms

EyouCms是基于TP5.0框架为核心开发的免费+开源的企业内容管理系统,专注企业建站用户需求 提供海量各行业模板,降低中小企业网站建设、网络营销成本,致力于打造用户舒适的建站体验

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、效果,将浏览高度缩小于第一个格子高度试下。


eyoucms实现页面瀑布流自动加载(图1)


另外一种方法是群里有朋友搞的,说是直接扔上去就行,还没做测试,先做一个记录。

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; }}}};