eyoucms实现页面瀑布流自动加载

速优网络（10年经验），服务数万家企业，固定透明报价。域名注册、主机/服务器、网站源码一站式服务。实体公司，专业团队，值得选择！建站业务：企业网站建设、公司官网制作、外贸网站建设、网站仿制、网站复制、仿站、外贸建站、单页扒站客服微信【suyoufuwu】

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

以上就是速优网络和大家分享的"eyoucms实现页面瀑布流自动加载",非常感谢您有耐心的读完这篇文章，我们将为您提供更多参考使用或学习交流的信息。我们还可为您提供：企业网站建设、网站仿制、网站复制、仿站、外贸网站建设、外贸建站、公司官网制作等服务，本公司以“诚信、专业、务实、创新”的服务理念服务于客户。如您需要合作，请扫码咨询，我们将诚挚为您服务。

TAG标签：易优cms

上一篇： eyoucms自增标签循环+1的三种方法

下一篇： eyoucms关于mod标签的用法