代码如下：

<!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. IdentityServer4源码解析_1_项目结构

    目录 IdentityServer4源码解析_1_项目结构 IdentityServer4源码解析_2_元数据接口 IdentityServer4源码解析_3_认证接口 IdentityServer4 ...

  2. OpenCV-Python 傅里叶变换 | 三十

    目标 在本节中,我们将学习 使用OpenCV查找图像的傅立叶变换 利用Numpy中可用的FFT函数 傅立叶变换的某些应用程序 我们将看到以下函数:cv.dft(),cv.idft()等 理论 傅立叶变 ...

  3. OpenCV-Python 图像平滑 | 十六

    目标 学会: 使用各种低通滤镜模糊图像 将定制的滤镜应用于图像(2D卷积) 2D卷积(图像过滤) 与一维信号一样,还可以使用各种低通滤波器(LPF),高通滤波器(HPF)等对图像进行滤波.LPF有助于 ...

  4. 字典树模板 HDU - 1251

    题意: 给一些单词,换行键后,查找以后输入的单词作为前缀的话们在之前出现过几次. 思路: 字典树模板----像查字典的顺序一样 #include<string> #include<s ...

  5. iOS mmap

    一.常规文件操作 常规文件操作(read/write)有那几个重要步骤: 进程发起读文件请求 内核通过查找进程文件符表,定位到内核已打开文件集上的文件信息,从而找到此文件的 inode inode 在 ...

  6. 磅日波浪分析4H 20190927

    磅日的短线调整预计在132结束 目前已显现出ABC调整末端. 未来预计开启第五浪升势 破前期反弹高点.

  7. docker安装Elasticsearch7.6集群并设置密码

    docker安装Elasticsearch7.6集群并设置密码 Elasticsearch从6.8开始, 允许免费用户使用X-Pack的安全功能, 以前安装es都是裸奔.接下来记录配置安全认证的方法. ...

  8. E - River Hopscotch POJ - 3258（二分）

    E - River Hopscotch POJ - 3258 Every year the cows hold an event featuring a peculiar version of hop ...

  9. 吐槽，Java 设计的槽点

    今天不灌水,直接上干货!希望下面的讲解,能与你产生一些共鸣. 1. 求长度各有千秋 你是否曾经在面试的时候,经常被问到:数组有没有 length() 方法?字符串有没有 length() 方法? 集合 ...

  10. 从 Linux 操作系统谈谈 IO 模型（终）

    Linux 为什么要区分内核空间与用户空间? Linux 操作系统的 IO 模型有哪几种?有啥区别? 常说的阻塞现象,到底是咋回事? 网络编程研发时,那块到底耗时最多,代码是否还有优化空间? 前几期的 ...