当前位置： 煜阳网站建设 > 公司网站制作 > cms系统 > 易优cms系统 > 易优cms技巧文章

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

2023-12-14 10:55 小编

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


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


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

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



Tag： 页面
返回首页 下一篇：eyoucms首页列表页调用文章content内容的方法

猜你喜欢

热门话题：

咨询 设计公司 百度 网站 小企业 推荐 哪个 费用 设计方案 工具 游戏 短视频 多少 产品 引流 排名榜 媒体 分析 策划 电子商务

联络方式：

13363039260

微信二维码 内部绝密传真282期
您感兴趣的内容
建设网站费用
公司网站制作
seo优化推广
托管服务
网站案例
网站模板
解决方案
地区
服务项目
建站
优化
维护
新闻资讯
公司动态
建站资讯
常见问题
关于我们
域名注册
虚拟主机
云服务器

加微信咨询

内部绝密传真282期
网站备案号：冀ICP备17016639号 Copyright © 2016-2025 邯郸市煜阳网络科技有限公司 版权所有
地址：河北省邯郸市丛台区赵都华润A座803室 电话：13363039260 QQ群1：522899734 QQ群2：542925463
本页内容由煜阳网络科技有限公司通过网络收集编辑所得，
所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中有涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，
工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。
在线咨询 拨打电话

客服QQ

电话

13363039260

内部绝密传真282期

微信二维码