内容涉及:php、分页、jquery、div+css

实例下载:http://download.csdn.net/detail/roro5119/7373905

index.php

<?
//数据库配置文件
include("conn.php");
//默认搜索
$page = $_GET["page"] ? $_GET["page"] : 1;
$pagesize = 20;
$pageval = ($page-1)*20; $sql="select `pic` from `mypic` limit $pageval,$pagesize";
$query = mysql_query($sql);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://files.cnblogs.com/tinyphp/jquery-1.3.2.min.js"></script>
<link rel="stylesheet" href="page.css">
<title>延迟加载</title>
</head>
<style type="text/css">
.showbox{ width:1000px; margin:0 auto;}
.showbox img{ padding:5px; background:#CCCCFF;}
.add-more{ width: 1000px; background: yellow;height: 100px; line-height: 30px; text-align: center; margin: 0 auto; display: none;}
</style>
<body>
<div class="showbox">
<?
while($row=mysql_fetch_array($query)){
?>
<img src="<?=$row["pic"];?>" alt="" width="200" height="200">
<?
}
?>
</div>
<!--数据加载提示,默认隐藏-->
<div class="add-more">数据正在加载...</div>
<!--js部分-->
<script type="text/javascript"> $(function(){
var downrange = 100; //下边界-参考正在加载提示层/px
var num = <?=$page;?>; //初始页码
var maxnum = num+5; //设置加载次数
var $main = $(".showbox"); //主体
var $loaddiv = $(".add-more") //加载提示层
var totalheight = 0;
//判断是否需要异步
function ifLoad(){
//滚动条距离顶部距离
var scrolltotop=parseFloat($(window).scrollTop());
//窗口高度
var winheight = parseFloat($(window).height());
//内容总高度
var conheight = parseFloat($(document).height())-downrange;
//总高度
totalheight = scrolltotop + winheight; //判断是否加载,当操作高度比内容大,空间充裕->加载
if(totalheight >= conheight && num!=maxnum){
ajaxLoad(num);
num++;
} } //ajax-fun
function ajaxLoad(page){
$.ajax({
url:"ajax.php",
type:"post",
data:{page:page,maxnum:maxnum},
success:function(result){
//追加数据
$main.append(result);
}
})
} //加载中隐藏显示
$loaddiv.ajaxStart(function(){
$(this).show();
}).ajaxStop(function(){
$(this).hide();
}) //scroll-fun
$(window).scroll(ifLoad); })
</script> </body>
</html>

异步文件:

<?
//数据库配置文件
include("conn.php"); //每页显示信息
$pagesize=20; //最大加载次数
$maxnum = $_POST["maxnum"]-1; //从哪里开始
$page=$_POST["page"];
$nextpagestart = $page*$pagesize; $sql = "select `pic` from `mypic` limit $nextpagestart,$pagesize";
$query =mysql_query($sql);
while($row = mysql_fetch_array($query)){
//内容
?>
<img src="<?=$row["pic"];?>" alt="" width="200" height="200">
<?
} //分页
if($page ==$maxnum){
include('page.class.php');
$sqlsum = "select `id` from `mypic`";
$querysum = mysql_query($sqlsum); //数据总数
$total = mysql_num_rows($querysum);
//参数对应位置:总记录,每页显示的条数,当前页,连接的地址
$my_page=new PageClass($total,$pagesize,$page,'?page={page}');
//输出页码
echo $my_page->myde_write();
exit;
}
?>

php动态滚动加载实例的更多相关文章

  1. Ajax动态滚动加载数据

    看新浪微博,人人网都有这样的效果:滚动条滚动到最下面的时候,新的数据就被自动加载出来了,今天亲自尝试了一下这个效果的实现. 最开始在CSDN上写了一版,功能比较简单,今天又增加了一个小功能:翻页到指定 ...

  2. PHP+InfiniteScroll实现网页无限滚动加载数据实例

    PHP+InfiniteScroll实现网页无限滚动加载数据实例,实现原理:当滚动条到底离网页底部一定长度的时候,向后台发送页数并获取数据. 首先我们在页面上先放置10条数据,即第一页,每一项都是p标 ...

  3. Java_动态重新加载Class机制

    Java动态重新加载Class 项目中使用到了动态重新加载Class的机制,作用是让一些代码上线之前可以在线上环境测试一下,当然,这是非常不好的测试机制,我刚来的时候也为这种机制感到惊讶—怎么可以在线 ...

  4. 使用javassist运行时动态重新加载java类及其他替换选择

    在不少的情况下,我们需要对生产中的系统进行问题排查,但是又不能重启应用,java应用不同于数据库的存储过程,至少到目前为止,还不能原生的支持随时进行编译替换,从这种角度来说,数据库比java的动态性要 ...

  5. esri-leaflet入门教程(5)- 动态要素加载

    esri-leaflet入门教程(5)- 动态要素加载 by 李远祥 在上一章节中已经说明了esr-leaflet是如何加载ArcGIS Server提供的各种服务,这些都是服务本身来决定的,API脚 ...

  6. js滚动加载小插件

    本文实例讲述了jquery滚动加载数据的方法.分享给大家供大家参考.具体分析如下: 少废话直接上代码!!!粗暴,直接,干脆 0//lk-2017-05-04 1(function($, win) { ...

  7. 记录WEUI中滚动加载的一个BUG

    最近写微信公众号,用到的技术栈是jq+vue的混合开发,采用的UI是移动端比较火的WEUI,在微信开发中应该较广泛.个人看惯了elementUI文档,相对于饿了么组件文档的详细,WEUI的文档还是比较 ...

  8. Vue滚动加载自定义指令

    用Vue在移动端做滚动加载,使用mint-ui框架, InfiniteScroll指令loadmore组件,在uc浏览器和qq浏览器都无法触发.无奈我只能自己写了. 决定用vue 的自定义指令 写滚动 ...

  9. JQuery仿淘宝滚动加载图片

    用 JQuery 制作随着显示页面的滚动条的滚动动态加载图片,适用于图片太多的页面,在访问网页时,可以先只加载第一屏要显示的图片,当用户进行向下滚动查看页面的时候,动态去加载这些图片,好处是减少页面第 ...

随机推荐

  1. js定时器 特定时间执行某段程序的例子

    定时器想必大家并不陌生吧,在本文为大家详细介绍下js中是如何实现定时器的,具体原理及代码如下. 例子: $(function(){ var handler = function(){ //www.jb ...

  2. Delphi XE5教程10:Delphi字符集

    内容源自Delphi XE5 UPDATE 2官方帮助<Delphi Reference>,本人水平有限,欢迎各位高人修正相关错误!也欢迎各位加入到Delphi学习资料汉化中来,有兴趣者可 ...

  3. .NET开发作业调度(job scheduling) - Quartz.NET

    Quartz.NET是JAVA Job Scheduling框架Quartz在.NET平台上的实现,可以满足小型乃至大型企业应用中的Job Scheduling. 通过Nuget安装Quartz.NE ...

  4. [转]Oracle学习记录 九 Prc C学习

    经过前面的了解,现在想用C语言来编程了,搜索了很多东西,后来决定先用Pro C来进行学习 在安装完Oracle数据库后就可以进行编程了,里面有一个命令proc就是对程序进行预编译的. 在这记一下,这是 ...

  5. PAT IO-02 整数四则运算

    /* *PAT IO-02 整数四则运算 *2015-07-30 *作者:flx413 */ #include<stdio.h> int main() { int a, b; scanf( ...

  6. MySQL监控工具-orzdba

    源代码地址:http://code.taobao.org/p/orzdba/src/trunk/     [root@hank-yoon servers]# chmod +x orzdba 在代码的1 ...

  7. RDD的转换操作---RDD转换过程

    1) union(otherRDD)RDD-->UnionRDD2) groupByKey(numPartitions)RDD-->ShuffledRDD-->MapPartitio ...

  8. Redis 四:存储类型之列表类型

    .lpush num 依次从左边推入0 - .rpush num 依次从右边推入0 - .lrnage num - 显示num列表中所有的数据 结果: .lpop num 从左边删除并弹出一个元素 . ...

  9. macos port总结

    http://stackoverflow.com/questions/733951/unable-to-download-the-source-code-of-open-source-projects ...

  10. 关于Resources.LoadAssetAtPath

    返回的是Object, 返回所在资源路径上的一个资源, 只能应用在unity的编辑器模式下,安卓等平台无效 static function LoadAssetAtPath (assetPath : s ...