代码如下：

<!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. mvc+ef入门（三）

    (1)新建一个DAL层用来放置Accountcontext.cs和Accountinitializer.新建一个models层用来归放sysuser,sysrole和sysuserrole,三个类.( ...

  2. [树的深度] Party

    Party A company has n employees numbered from 1 to n. Each employee either has no immediate manager ...

  3. [状态压缩,折半搜索] 2019牛客暑期多校训练营（第九场）Knapsack Cryptosystem

    链接:https://ac.nowcoder.com/acm/contest/889/D来源:牛客网 时间限制:C/C++ 2秒,其他语言4秒 空间限制:C/C++ 262144K,其他语言52428 ...

  4. Selenium系列（九） - 针对alert窗口的处理（警告框、确认框、对话框）

    如果你还想从头学起Selenium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1680176.html 其次,如果你不懂前端基础知识, ...

  5. Ubuntu16.04下安装搜狗输入法及实现中英文转换问题

    1．问题描述 版本信息:Ubuntu16.04 解决问题:搜狗输入法的安装 2．解决办法 STEP1:搜索搜狗输入法for Linux --> 选择64bit --> 下载得到一个sogo ...

  6. Linux常用的命令收藏

    摘要 Linux现在已经是大部分草根站长不可缺少的一部分,想要维护好你的网站就必须懂得常用的linux命令,这个可以加快你对服务器的维护,运营:同时Linux在嵌入式系统开发中有不可替代的优势,越来越 ...

  7. C语言自学网官方微信相关功能使用方法

    一.微信扫描关注微信公众账号(C语言自学网),我们会不定时更新关于编程的技术文章和相关资讯,了解大佬的成长之路. 二.回复“C语言学习资料”,将显示由我们精心整理的全套C语言学习资料的下载地址及链接. ...

  8. coding++：Spring_IOC(控制反转)详解

    IoC是什么: 1):Ioc—Inversion of Control,即“控制反转”,不是什么技术,而是一种设计思想. 2):在Java开发中,Ioc意味着将你设计好的对象交给容器控制,而不是传统的 ...

  9. 本地不安装Oracle时，PLSQL的配置

    这篇我在csdn上写过的,文章地址:https://blog.csdn.net/weixin_40404606/article/details/101940542

  10. IEnumerable和IQueryable在使用时的区别

    最近在调研数据库查询时因使用IEnumerable进行Linq to entity的操作,造成数据库访问缓慢.此文讲述的便是IEnumerable和IQueryable的区别. 微软对IEnumera ...