PHP Code
  1. <div id="container">
  2. <?php
  3. $query=mysql_query("select * from content order by id desc limit 0,10");
  4. while ($row=mysql_fetch_array($query)) {
  5. ?>
  6. <div class="single_item">
  7. <div class="element_head">
  8. <div class="date"><?php echo date('m-d H:i',strtotime($row['updatetime']));?></div>
  9. <div class="author"><?php echo $row['id'];?></div>
  10. </div>
  11. <div class="content"><?php echo $row['message'];?></div>
  12. </div>
  13. <?php } ?>
  14. </div>
  15. <div class="nodata"></div>
js文件
 
JavaScript Code
  1. <script type="text/javascript">
  2. $(function(){
  3. var winH = $(window).height(); //页面可视区域高度
  4. var i = 1;
  5. $(window).scroll(function () {
  6. var pageH = $(document.body).height();
  7. var scrollT = $(window).scrollTop(); //滚动条top
  8. var aa = (pageH-winH-scrollT)/winH;
  9. if(aa<0.02){
  10. $.getJSON("result.php",{page:i},function(json){
  11. if(json){
  12. var str = "";
  13. $.each(json,function(index,array){
  14. var str = "<div class="single_item"><div class="element_head">";
  15. var str = str + "<div class="date">"+array['date']+"</div>";
  16. var str = str + "<div class="author">"+array['author']+"</div>";
  17. var str = str + "</div><div class="content">"+array['content']+"</div></div>";
  18. $("#container").append(str);
  19. });
  20. i++;
  21. }else{
  22. $(".nodata").show().html("别滚动了,已经到底了。。。");
  23. return false;
  24. }
  25. });
  26. }
  27. });
  28. });
  29. </script>

result.php

PHP Code
  1. <?php
  2. include("conn.php");
  3. $page = intval($_GET['page']);  //获取请求的页数
  4. $start = $page*5;
  5. $query=mysql_query("select * from content order by id desc limit $start,5");
  6. while ($row=mysql_fetch_array($query)) {
  7. $arr[] = array(
  8. 'content'=>$row['message'],
  9. 'author'=>$row['id'],
  10. 'date'=>date('m-d H:i',strtotime($row['updatetime']))
  11. );
  12. }
  13. echo json_encode($arr);  //转换为json数据输出
  14. ?>

jquery根据滚动条动态加载数据的更多相关文章

  1. js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...

  2. [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件

    页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空 ...

  3. Jquery页面滚动动态加载数据,页面下拉自动加载内容

    <!DOCTYPE=html> <html> <head> <script src="js/jquery.js" type="t ...

  4. js实现滚动条来动态加载数据

    主要angular2+es6 data:Array<any> //展示的数据 allData:Array<any> //全部的数据 size:number = 10 //每次动 ...

  5. 【Jquery mobile】动态加载ListView 转

    [Jquery mobile]动态加载ListView 分类: Jquery Mobile2011-12-01 09:04 13984人阅读 评论(1) 收藏 举报 jquerylistviewmob ...

  6. ASP.NET MVC动态加载数据

    ASP.NET MVC动态加载数据,一般的做法是使用$.each方法来循环产生tabel: 你可以在html时先写下非动态的部分:  Source Code 上图中,有一行代码: <tbody ...

  7. 爬虫开发6.selenuim和phantonJs处理网页动态加载数据的爬取

    selenuim和phantonJs处理网页动态加载数据的爬取阅读量: 1203 动态数据加载处理 一.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素材http://sc.chinaz.com/ ...

  8. asp.net c# select 动态加载数据

    1.说明通过 asp.net,利用jQuery ,c#语言给 select控件动态加载数据.前端页面使用的是.aspx类型的HTML页面,后台使用MVC上的controller控制器 2.webcon ...

  9. MiniUI treeGrid 动态加载数据与静态加载数据的区别

    说明:treegrid静态数据加载时数据结构是一棵树包含children节点集合,而采用动态加载数据时数据是List结构的具体项. 静态加载数据 test1.html <!DOCTYPE htm ...

随机推荐

  1. sql_2

    编辑表结构ALTER TABLE `sp_account_trans`     MODIFY COLUMN `TRANS_DESC` varchar(81) CHARACTER SET utf8 CO ...

  2. python与图灵机器人交互(WXPY版本)

    开发者账号:wujunfeng , 开发者key:官网申请  #!/usr/bin/env python#-*- coding:utf-8 -*- @Author : wujf @Time:2018/ ...

  3. linux内核内存分配(一、基本概念)

    内存分配是Linux比较复杂也是比较重要的部分,这个和ssd驱动很类似:物理地址和虚拟地址的映射关系.下面总结下最近看到的有关内存分配的内容和自己的理解: 1.一致内存访问和非一致内存访问 上图来自& ...

  4. Project Euler 19 Counting Sundays( 蔡勒公式计算星期数 )

    题意:在二十世纪(1901年1月1日到2000年12月31日)中,有多少个月的1号是星期天? 蔡勒公式:计算 ( year , month , day ) 是星期几 以下图片仅供学习! /****** ...

  5. 2、链接数据库+mongodb基础命令行+小demo

    链接数据库并且打印出数据的流程:1.在CMD里面输入 mongod 2.在CMD里面输入 mongo 3.在输入mongodb命令行里面进行操作,首先输入 show dbs 来查看是否能够链接得上库4 ...

  6. hdu 1703

    #include<stdio.h> #define  N  11000 int a[N]; int main() {     int i,n;     a[1]=0;a[2]=5;a[3] ...

  7. spring boot的几种配置类型

    1.spring boot的几种配置类型 1)基本配置,spring自动读取的,全都在application.yml里配置,spring会自动读取这个配置文件 2)个性化配置:比如配置intercep ...

  8. [Design]Adobe CS6 2%错误问题

    错误描述:FATAL: Payload '{3F023875-4A52-4605-9DB6-A88D4A813E8D} Camera Profiles Installer 6.0.98.0' info ...

  9. [SharePoint2010开发入门经典]一、SPS2010介绍

    本章概要: 1.熟悉SPS基本特性 2.理解SPS基础架构 3.开发SPS工具

  10. Android 开发最佳实践

    原文地址:https://github.com/futurice/android-best-practices/blob/master/translations/Chinese/README.cn.m ...