代码如下：

<!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. [BJDCTF 2nd]old-hack

    进入首页: 首页告诉了我们是thinkphp5的漏洞. 知道了是哪个版本的话就搜一搜喽:最后发现是thinkphp5.0.23的命令执行 payload_1:查看根目录文件,发现flag位置 http ...

  2. 安装SQL Server 2008R2 报错“此计算机上安装了 Microsoft Visual Studio 2008 的早期版本”解决方法

    安装SQL Server 2008 R2报错“此计算机上安装了 Microsoft Visual Studio 2008 的早期版本,请在安装 SQL Server 2008 前将 VS2008 升级 ...

  3. if-else代码优化的八种方案

    前言 代码中如果if-else比较多,阅读起来比较困难,维护起来也比较困难,很容易出bug,接下来,本文将介绍优化if-else代码的八种方案. 优化方案一:提前return,去除不必要的else 如 ...

  4. Docker Data

    docker data 六.Docker存储 docker存储驱动storage driver(优先使用linux默认的storage driver,因为比较稳定) ubuntu:aufs,/var/ ...

  5. [CVPR 2019]Normalized Object Coordinate Space for Category-Level 6D Object Pose and Size Estimation

    论文地址:https://arxiv.org/abs/1901.02970    github链接:https://github.com/hughw19/NOCS_CVPR2019 类别级6D物体位姿 ...

  6. [模拟] Codefroces 1175B Catch Overflow!

    题目:http://codeforces.com/contest/1175/problem/B B. Catch Overflow! time limit per test 1 second memo ...

  7. SpannableStringBuilder实现TextView华丽变身

    前言 想要在TextView 的文本添加一些突出文字,然后点击可以进行跳转,首先想到的就是TextView拼接,但是考虑到换行后的显示又不是很合适,一番查询后发现了SpannableStringBui ...

  8. 开发一个健壮的npm包

    项目地址:loan-calculate-utils npm包的发布.更新查看上一篇文章 开发一个基础的npm包 目前我们的目录是这个样子: . ├── source 源代码目录 │   └── ind ...

  9. js 中的yield

    yield是什么 yield是ES6的新关键字,使生成器函数执行暂停,yield关键字后面的表达式的值返回给生成器的调用者.它可以被认为是一个基于生成器的版本的return关键字. yield关键字实 ...

  10. iOS sign in with Apple 苹果ID登录

    http://www.cocoachina.com/articles/109104?filter=ios https://juejin.im/post/5deefc5e518825126416611d ...