代码如下：

<!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. postgre安装和使用（R&Python)

    安装postgre http://helianthus-code.lofter.com/post/1dfe03e0_1c68233aa 这里选C更好 这里口令密码输入就是黑的 我装的时候反复报错,查了 ...

  2. PHP7内核（八）：深入理解字符串的实现

    在前面大致预览了常用变量的结构之后,我们今天来仔细的剖析一下字符串的具体实现. 一.字符串的结构 struct _zend_string { zend_refcounted_h gc; /* 字符串类 ...

  3. JavaScript 趣味题。

    第一题: const Greeters = [] for (var i = 0 ; i < 10 ; i++) { Greeters.push(function () { return cons ...

  4. flask中温柔显示404等错误

    写下下面两个视图函数,然后在模板中写下错误时展现的内容,当然模板名,函数名是可以改的哟@app.errorhandler(404)def page_not_found(error): return r ...

  5. 医学图像分割-在3DSlicer中使用英伟达的AI辅助工具NvidiaAIAssistedAnnotation自动切割医学图像教程

    前期准备 下载3DSlicer并安装: 3DSlicer官网(http://www.slicer.org)或者直接下载(https://download.slicer.org),需要注意目前该插件只支 ...

  6. 模块 collections 高级数据类型

    collections模块 原文来自cnblog 的 Eva-J Eva-J 介绍了collections模块的常用方法,和演示实例 在 Python cookbook 的第一章中还有一些 更加好玩的 ...

  7. Linux操作系统及调用接口

    Linux操作系统包含以下各子系统: 系统调用子系统:操作系统的功能调用同一入口: 进程管理子系统:对执行程序进行生命周期和资源管理: 内存管理子系统:对系统的内存进行管理.分配.回收.隔离: 文件子 ...

  8. 1012 The Best Rank (25 分)

    To evaluate the performance of our first year CS majored students, we consider their grades of three ...

  9. 【mysql】mysql优化

    一,表设计 1.1. E-R(entity relation)实体关系图 长方形 实体 表 椭圆形 属性 字段 菱形 关系 一对一 多对一 属于 多对多 1.2. 三范式标准 原子性 个人信息 省市县 ...

  10. Java第一天，带你走进编程的世界，我的第一个程序

    要想彻底了解Java是什么,我就得首先了解编程语言的发展史.编程语言最初的形势是"0101......"数据编程,也就是机器语言.机器语言可以说是一种几乎没有人能够看懂的编程语言, ...