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


 小秋同学  标签使用技巧  2021-03-25 15:23:27    收藏:  赞(514)
学习吧_一个不错的学习网站
本文地址:https://www.qiuhai.com/doc/1733.html 复制链接 如果还有疑问,欢迎加入我们的QQ交流群:887790 加入Q群 易优最新程序下载: 点击下载
QQ在线咨询