数据的瀑布流加载

最新推荐文章于 2021-11-22 21:31:06 发布
最新推荐文章于 2021-11-22 21:31:06 发布
阅读量161 收藏 1
点赞数
分类专栏： 案例 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55600187/article/details/115295095
版权

数据的瀑布流加载

1.设置当前页和每页显示的数据条数两个变量
2.计算总页数，运用向上取整函数Math.ceil();
3.将每次返回的数据动态渲染到页面；
4.添加滚动事件；

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .content{
            width:500px;
            height:300px;
            border:1px solid #000;
            margin:0 auto;
            overflow-y: scroll;

        }
        .content>div{
            line-height: 40px;
            border-bottom: 1px dashed #00aaff;
        }
        .content>div span{
            display: inline-block;
            width:70px;
        }


    </style>
</head>
<body>
<div class="content">

</div>
<script>
    var stulist = [
        {"name": "小黑1", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑2", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑3", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑4", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑5", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑6", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑7", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑8", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑9", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑0", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑11", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑12", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑13", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑14", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑15", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑16", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑17", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑18", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑19", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑21", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑22", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑23", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑24", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑25", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑26", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑27", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑28", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑29", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑31", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑32", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑33", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑34", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑35", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑36", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑37", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑38", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑39", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑41", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑42", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑43", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑44", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑45", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑46", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑47", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑48", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑49", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑51", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑52", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑53", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑54", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑55", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑56", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑57", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑58", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑59", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑61", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑62", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑63", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑64", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑65", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑66", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑67", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑68", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑71", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑72", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑73", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑74", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑75", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑76", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑77", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑78", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑79", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑81", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑82", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑83", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑84", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑85", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑86", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑87", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑88", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑89", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑91", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑92", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑93", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑94", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑95", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑96", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑97", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑98", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑101", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑102", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑103", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑104", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑105", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑106", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑107", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑108", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑109", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑111", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑112", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑113", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑114", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑115", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑116", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑117", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑118", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑121", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑122", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑123", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑124", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑125", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑126", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""},
        {"name": "小黑127", "sex": "男", "age": 12, "tel": "110", "address": "随便市", "des": ""}
    ];
    var nowPage=1;
    var pageNum=10;
    var total=Math.ceil(stulist.length/pageNum);
    var parEle=null;
    window.onload=function(){
        parEle=document.getElementsByClassName('content')[0];
        var data=returnData(nowPage,pageNum);
        rederData(data);
        //添加滚动事件
        parEle.onscroll=function(){
            console.log(this.clientHeight);//元素实际高
            console.log(this.scrollTop);//向下滑动的距离
            console.log(this.scrollHeight);//滑动的总高
            if(this.clientHeight+this.scrollTop>=this.scrollHeight){
                //加载另一页的数据到页面
                nowPage++;
                if(nowPage>total){
                    return;
                }
                var data=returnData(nowPage,pageNum);
                rederData(data);
            }
        }

    }
    //每次返回对应的数据
    function returnData(now,num){
        return stulist.slice((now-1)*num,now*num);
    }
    //动态渲染到元素内部
    function rederData(info){
        var str="";
        for(var i=0;i<info.length;i++)
        {
            str+="<div><span>"+info[i].name+"</span><span>"+info[i].age+"</span><span>"+info[i].sex+"</span><span>"+info[i].tel+"</span><span>"+info[i].address+"</span><span>"+info[i].des+"</span></div>";
        }
        parEle.innerHTML+=str;


    }
</script>
</body>
</html>
m0_55600187
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
瀑布流(加载更多)
01-03
瀑布流(加载更多)：http://blog.csdn.net/libin_1/article/details/50449837
瀑布流加载数据。
weixin_46953330的博客
04-09 360
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } .content > div { posit
瀑布流加载数据
lixin890808的专栏
03-22 392
Jscript代码  "text/javascript">       (function() {           var pageNo = 2 , PageCount = 3 , toLoad = true;           window.onload = window.onscroll = function() {               var ot = d
js实现瀑布流加载(数据加载以及图片加载)
赵佳敏的博客
09-25 1633
@TOC 一、数据的瀑布流加载 <script> //模拟数据 var stulist = []; var nowPage=1; var pageNum=10; var totle=Math.ceil(stulist.length/pageNum); var parEle=null; window.onload=function (){ parEle=document.getElementsByClassNam.
超级简单的瀑布流加载数据
热门推荐
花神的博客
03-21 1万+
瀑布流是我们经常用到的加载方式，对于大量数据加载优化效果十分明显，这里我使用非常简单的代码来实现瀑布流，需要的朋友尽管copy：<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta name="aplus-terminal" content="1"> <meta na
jQuery实现的瀑布流加载效果示例
11-25
本文实例讲述了jQuery实现的瀑布流加载效果。分享给大家供大家参考，具体如下： demo.js： $(function(){ $('img').load(function(){ var box = $('.box'); var boxHeight = { leftBox:[], centerBox:[], ...
JQ瀑布流加载
12-14
通过JQ实现瀑布流加载，对后端发起AJAX请求，后端以分页的形式传输数据，每次post请求page++,返回值直接动态添加到前端页面
javascript 瀑布流布局，ajax数据加载
06-01
瀑布流布局，ajax数据加载，向下拖动，加载更多数据，请更换正式接口
javascript实现瀑布流加载图片原理
01-19
根据不同菜单的属性值分别加载不同的数据 下拉滚动条到一定位置预加载图片，滚动条拉到最底下的时候渲染html； 鼠标移到菜单，切换各个图片列表； 鼠标移到图片列表上，显示详细信息；  技术实现方案： 　先...
瀑布流加载更多
06-07
网页特效--瀑布流加载更多，点击加载更多出现新的数据
瀑布流+无限滚动加载数据
08-14
NULL 博文链接：https://nbczw8750.iteye.com/blog/2316765
瀑布流（集成懒加载）
01-06
jquery实现瀑布流+懒加载，项目集成了 AnimOnScroll.js、imagesloaded.js、masonry.pkgd.min.js
jquery实现瀑布流效果 jquery下拉加载新数据
10-20
主要为大家详细介绍了jquery实现瀑布流效果，下拉加载新数据,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Ajax实现瀑布流动态加载Demo
10-15
瀑布流动态加载的原理：加载触发主要是通过js实现的。在页面的某个地方设置一个标记，当页面滚动到这个标记的位置时，触发加载。
js实现瀑布流并可加载更多
05-30
利用JavaScript实现了瀑布流，并可以加载更多！
用原生JS写轮播图
weixin_44827568的博客
06-12 2082
今天我们来用原生JS写一个左右滚动的轮播图 HTML结构 <div class="all" id='box'> <!-- 显示图片的区域 --> <div class="screen"> <ul> <li><img src="images/1....
数据瀑布流
weixin_30794851的博客
01-09 95
<script type="text/javascript" src="{$static_domain}/js/template.js"></script><style> .a_load_more { height: 20px; line-height: 20px; text-alig...
瀑布流&滚动加载数据
M_X_B_MR_L的博客
11-22 134
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>瀑布流&滚动加载数据</title> <style>
自动加载瀑布流
qq_42704649的博客
05-24 231
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 这个版本太麻烦，重新整理了一个：https://blog.csdn.net/jklgfgdsr/article/details/86704881 //////...
vue瀑布流加载数据
最新发布
10-19
Vue瀑布流加载数据是一种常见的网页布局方式，它可以实现参差不齐的多栏布局，并且随着页面滚动条向下滚动，不断加载数据块并附加至当前尾部。在Vue中，我们可以使用vue-waterfall插件来实现瀑布流布局。通过传递...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值