jquery根据滚动条动态加载数据
- <div id="container">
- <?php
- $query=mysql_query("select * from content order by id desc limit 0,10");
- while ($row=mysql_fetch_array($query)) {
- ?>
- <div class="single_item">
- <div class="element_head">
- <div class="date"><?php echo date('m-d H:i',strtotime($row['updatetime']));?></div>
- <div class="author"><?php echo $row['id'];?></div>
- </div>
- <div class="content"><?php echo $row['message'];?></div>
- </div>
- <?php } ?>
- </div>
- <div class="nodata"></div>
- <script type="text/javascript">
- $(function(){
- var winH = $(window).height(); //页面可视区域高度
- var i = 1;
- $(window).scroll(function () {
- var pageH = $(document.body).height();
- var scrollT = $(window).scrollTop(); //滚动条top
- var aa = (pageH-winH-scrollT)/winH;
- if(aa<0.02){
- $.getJSON("result.php",{page:i},function(json){
- if(json){
- var str = "";
- $.each(json,function(index,array){
- var str = "<div class="single_item"><div class="element_head">";
- var str = str + "<div class="date">"+array['date']+"</div>";
- var str = str + "<div class="author">"+array['author']+"</div>";
- var str = str + "</div><div class="content">"+array['content']+"</div></div>";
- $("#container").append(str);
- });
- i++;
- }else{
- $(".nodata").show().html("别滚动了,已经到底了。。。");
- return false;
- }
- });
- }
- });
- });
- </script>
result.php
- <?php
- include("conn.php");
- $page = intval($_GET['page']); //获取请求的页数
- $start = $page*5;
- $query=mysql_query("select * from content order by id desc limit $start,5");
- while ($row=mysql_fetch_array($query)) {
- $arr[] = array(
- 'content'=>$row['message'],
- 'author'=>$row['id'],
- 'date'=>date('m-d H:i',strtotime($row['updatetime']))
- );
- }
- echo json_encode($arr); //转换为json数据输出
- ?>
jquery根据滚动条动态加载数据的更多相关文章
- js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...
- [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件
页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空 ...
- Jquery页面滚动动态加载数据,页面下拉自动加载内容
<!DOCTYPE=html> <html> <head> <script src="js/jquery.js" type="t ...
- js实现滚动条来动态加载数据
主要angular2+es6 data:Array<any> //展示的数据 allData:Array<any> //全部的数据 size:number = 10 //每次动 ...
- 【Jquery mobile】动态加载ListView 转
[Jquery mobile]动态加载ListView 分类: Jquery Mobile2011-12-01 09:04 13984人阅读 评论(1) 收藏 举报 jquerylistviewmob ...
- ASP.NET MVC动态加载数据
ASP.NET MVC动态加载数据,一般的做法是使用$.each方法来循环产生tabel: 你可以在html时先写下非动态的部分: Source Code 上图中,有一行代码: <tbody ...
- 爬虫开发6.selenuim和phantonJs处理网页动态加载数据的爬取
selenuim和phantonJs处理网页动态加载数据的爬取阅读量: 1203 动态数据加载处理 一.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素材http://sc.chinaz.com/ ...
- asp.net c# select 动态加载数据
1.说明通过 asp.net,利用jQuery ,c#语言给 select控件动态加载数据.前端页面使用的是.aspx类型的HTML页面,后台使用MVC上的controller控制器 2.webcon ...
- MiniUI treeGrid 动态加载数据与静态加载数据的区别
说明:treegrid静态数据加载时数据结构是一棵树包含children节点集合,而采用动态加载数据时数据是List结构的具体项. 静态加载数据 test1.html <!DOCTYPE htm ...
随机推荐
- sql_2
编辑表结构ALTER TABLE `sp_account_trans` MODIFY COLUMN `TRANS_DESC` varchar(81) CHARACTER SET utf8 CO ...
- python与图灵机器人交互(WXPY版本)
开发者账号:wujunfeng , 开发者key:官网申请 #!/usr/bin/env python#-*- coding:utf-8 -*- @Author : wujf @Time:2018/ ...
- linux内核内存分配(一、基本概念)
内存分配是Linux比较复杂也是比较重要的部分,这个和ssd驱动很类似:物理地址和虚拟地址的映射关系.下面总结下最近看到的有关内存分配的内容和自己的理解: 1.一致内存访问和非一致内存访问 上图来自& ...
- Project Euler 19 Counting Sundays( 蔡勒公式计算星期数 )
题意:在二十世纪(1901年1月1日到2000年12月31日)中,有多少个月的1号是星期天? 蔡勒公式:计算 ( year , month , day ) 是星期几 以下图片仅供学习! /****** ...
- 2、链接数据库+mongodb基础命令行+小demo
链接数据库并且打印出数据的流程:1.在CMD里面输入 mongod 2.在CMD里面输入 mongo 3.在输入mongodb命令行里面进行操作,首先输入 show dbs 来查看是否能够链接得上库4 ...
- hdu 1703
#include<stdio.h> #define N 11000 int a[N]; int main() { int i,n; a[1]=0;a[2]=5;a[3] ...
- spring boot的几种配置类型
1.spring boot的几种配置类型 1)基本配置,spring自动读取的,全都在application.yml里配置,spring会自动读取这个配置文件 2)个性化配置:比如配置intercep ...
- [Design]Adobe CS6 2%错误问题
错误描述:FATAL: Payload '{3F023875-4A52-4605-9DB6-A88D4A813E8D} Camera Profiles Installer 6.0.98.0' info ...
- [SharePoint2010开发入门经典]一、SPS2010介绍
本章概要: 1.熟悉SPS基本特性 2.理解SPS基础架构 3.开发SPS工具
- Android 开发最佳实践
原文地址:https://github.com/futurice/android-best-practices/blob/master/translations/Chinese/README.cn.m ...