代码如下：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>ajax按楼层加载数据</title>

<style>

* {

    box-sizing: border-box;

    outline: none;

}

.head{

    width: %;

    height: 500px;

}

p {

    margin: .5em;

    word-break: break-all;

}

.container {

    position: relative;

    width: 700px;

    height: 500px;

    margin: auto;

    padding-right: 200px;

}

.content {

    width: %;

    height: %;

    border: 1px solid #ccc;

}

.content-opt {

    position: absolute;

    top: ;

    right: ;

    width: 200px;

    height: %;

}

.content-text {

    height: calc(% - 30px);

    margin-bottom: 30px;

    border: 1px solid #ccc;

    overflow: auto;

}

.content-input {

    position: absolute;

    bottom: ;

    width: %;

    height: 30px;

    border: 1px solid #ccc;

}

.content-input input {

    width: %;

    padding: 2px;

    border-radius: 5px;

}

.content-input button {

    padding: 3px 10px;

    border: none;

    border-radius: 5px;

    background: rgb(, , );

}

</style>

<body style="background: #ccc;">

<div class="head"></div>

<!--楼层1开始-->

<div class="floor"  id="floor1" style="height: 1500px;">

</div>

<!--楼层1结束-->

<!--楼层2开始-->

<div class="floor"  id="floor2" style="height: 1500px;">

</div>

<!--楼层2结束-->

<script src="js/jquery.min.js"></script>

<script>

    $(document).ready(function(){

    var successload = new Array(); //已加载楼层

     //滚动条滚动

    $(window).scroll(function () { scrollload(); });

    //滚动条滚动事件

    function scrollload() {

        var scrolltop = $(this).scrollTop();

        //当内容滚动到底部时加载新的内容

        $(".floor").each(function (index, value) {

            if (scrolltop + $(window).height() >= $(this).offset().top && $(this).offset().top + $(this).height() >= scrolltop) {

                if ($.inArray(index + , successload) == -) {

                    loadFloor(index + );

                    successload.push(index + );

                }

            }

        });

    }

    //楼层商品绑定

    function loadFloor(loadIndex) {

        if (loadIndex == ) {

            //$('#floor1').append("楼层一");

            $.ajax({

                type: "POST",//请求方式

                url: "floor1.json",//地址，就是json文件的请求路径

                dataType: "json",//数据类型可以为 text xml json  script  jsonp

　　　　　　　　　 success: function(result){//返回的参数就是 action里面所有的有get和set方法的参数

                    $.each(result,function(index,obj){

                        if(obj['sex']==){

                            $("#floor1").append(

                            "<div class='product'>"

                                +"<div class='p1 p'>"+obj['name']+"</div>"+

                            "</div>");

                        }

                    });

                }

            });

        }

        if (loadIndex == ) {

            //$('#floor2').append("楼层二");

            $.ajax({

                type: "POST",//请求方式

                url: "floor1.json",//地址，就是json文件的请求路径

                dataType: "json",//数据类型可以为 text xml json  script  jsonp

　　　　　　　　　 success: function(result){//返回的参数就是 action里面所有的有get和set方法的参数

                    $.each(result,function(index,obj){

                        if(obj['sex']==){

                            $("#floor2").append(

                            "<div class='product'>"

                                +"<div class='p1 p'>"+obj['name']+"</div>"+

                            "</div>");

                        }

                    });

                }

            });

        }

    }

});

</script>

</body>

</html>

floor1.JSON数据：

[

    {

      "name":"张国立",

      "sex":

    },

    {

      "name":"张铁林",

      "sex":

    },

    {

      "name":"邓婕",

      "sex":

    },

    {

      "name":"成龙",

      "sex":

    },

    {

      "name":"张杰",

      "sex":

    },

    {

      "name":"尚雯婕",

      "sex":

    }

  ]

ajax按楼层加载数据的更多相关文章

  1. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  2. 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据

    瀑布流加载显示数据,在当下已经用的很普遍,尤其是我们在做网上商城时,在产品列表页面已经被普遍使用. 对于实现瀑布流布局的解决方案主要有以下两种方式: 1.对每一条显示数据使用绝对定位+浮动的方式,这样 ...

  3. 巧用ajax请求服务器加载数据列表时提示loading

    我们利用weui.js中的weui.loading为效果,ajax的beforeSend与complete方法,做一个加载数据时会有几秒的 loading... 要在页面需要加载的JS文件: < ...

  4. Ajax页面的加载数据与删除

    1.数据库找一张表: 颜色表2.主页面主页面的代码用到tbody:TBODY作用是:可以控制表格分行下载,从而提高下载速度.(网页的打开是先表格的的内容全部下载完毕后,才显示出来,分行下载可以先显示部 ...

  5. Ajax 滚动异步加载数据

    第一种情况:单个div滚动 HTML <body> <!-- search start --> <div class="search" #if($m_ ...

  6. Ajax动态滚动加载数据

    看新浪微博,人人网都有这样的效果:滚动条滚动到最下面的时候,新的数据就被自动加载出来了,今天亲自尝试了一下这个效果的实现. 最开始在CSDN上写了一版,功能比较简单,今天又增加了一个小功能:翻页到指定 ...

  7. php ajax 下拉加载数据

    视图 <html> <head> <title>健康知识</title> <script type="text/javascript&q ...

  8. highcharts Ajax 动态请求加载数据

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  9. thinkphp5.0调用ajax无刷新加载数据

    控制器层那边就是调数据返回,这里不再赘述,视图层页面ajax部分写法如下 function shanchu(obj) { var code = $(obj).attr("code" ...

随机推荐

  1. 【Unity游戏开发】跟着马三一起魔改LitJson

    一.引子 在游戏开发中,我们少不了和数据打交道,数据的存储格式可谓是百花齐放,xml.json.csv.bin等等应有尽有.在这其中Json以其小巧轻便.可读性强.兼容性好等优点受到广大程序员的喜爱. ...

  2. python ndarray与pandas series相互转换，ndarray与dataframe相互转换

    https://blog.csdn.net/qq_33873431/article/details/98077676

  3. Android 文本TextView底部对齐实现

    前言 想要实现主体文字突出显示,前面是数值加粗,后面是单位符号,且底部对齐数值显示的效果:但是不同TextView字体大小排版后总是有些差别,无法底部对齐.百度一番后有重写TextView的,还有其它 ...

  4. 【MySQL】面试官：谈谈你对Mysql的MVCC的理解？

    MVCC(Mutil-Version Concurrency Control),就是多版本并发控制.MVCC 是一种并发控制的方法,一般在数据库管理系统中,实现对数据库的并发访问. 在Mysql的In ...

  5. OpenCV-Python BRIEF(二进制的鲁棒独立基本特征) | 四十二

    目标 在本章中,我们将看到BRIEF算法的基础知识 理论 我们知道SIFT使用128维矢量作为描述符.由于它使用浮点数,因此基本上需要512个字节.同样,SURF最少也需要256个字节(用于64像素) ...

  6. Python第十二章-多进程和多线程01-多进程

    多进程和多线程 一.进程 1.1 进程的引入 现实生活中,有很多的场景中的事情是同时进行的,比如开车的时候 手和脚共同来驾驶汽车,再比如唱歌跳舞也是同时进行的:试想,如果把唱歌和跳舞这2件事情分开依次 ...

  7. A 密码锁

    时间限制 : - MS   空间限制 : - KB  评测说明 : 1s,128m 问题描述 何老板有一把奇特的密码锁.密码锁上有n个数字(范围0到9)排成一排.密码锁上有两个按钮:每按一次1号按钮, ...

  8. tensorflow编程学习路线及笔记

    话不多说,直接上图! 关于人工智能算法学习思路,欢迎浏览我的另一篇随笔:如果你想开始学习算法,不妨先了解人工智能有哪些方向? 关于python编程学习路线及笔记,欢迎浏览我的另一篇随笔:python编 ...

  9. 关于C#三层架构增删改查中的“登录”问题

    先来一个界面: DAO中的方法: 实现代码如下: 这里需要特别注意的是一个“安全性”的考虑: 当登入成功时,把登入时输入的用户名赋值到Session,然后在后面的页面进行判断--此时Session保留 ...

  10. CAP定理和BASE理论

    CAP定理和BASE理论 标签(空格分隔): 操作系统 CAP定理 CAP定理: 一个分布式系统最多只能满足一致性 (Consistency), 可用性(Availability)和分区容错性(Par ...