内容涉及: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. php后台如何避免用户直接进入方法实例

    这篇文章介绍了php后台如何避免用户直接进入方法实例,有需要的朋友可以参考一下 1)创建BaseController控制器继承Controller(后台的一切操作要继承BaseController): ...

  2. 当年的笔记_apache配置虚拟主机

    下午需要,在网上找了一堆,没找到合适的,翻出来自己当年的笔记,还是自己记的容易理解. 解决方案1:通过端口来区分 1>添加一个虚拟主机1.在d盘下新建www目录,如:d:/www. 2.修改ht ...

  3. Oracle RAC Failover

    Oracle  RAC 同时具备HA(High Availiablity) 和LB(LoadBalance). 而其高可用性的基础就是Failover(故障转移). 它指集群中任何一个节点的故障都不会 ...

  4. WPF中的瀑布流布局(TilePanel)控件

    最近在用wpf做一个metro风格的程序,需要用到win8风格的布局容器,只能自己写一个了.效果如下 用法 : <local:TilePanel                          ...

  5. 一段Android里面打印CallStatck的代码

    public void dumpCallStack() { java.util.Map<Thread, StackTraceElement[]> ts = Thread.getAllSta ...

  6. Go学习指南

    学习Golang书籍&资料: 1. The Go Programming Language Specification:  http://golang.org/ref/spec 2. How ...

  7. [原]项目进阶 之 持续构建环境搭建(三)Maven环境搭建

    上次的博文项目进阶 之 持续构建环境搭建(二)Nexus私服器中,我们搭建了一个Nexus的maven私服,这次我们来重点讲解一下Maven的安装和配置.这里说明一下这次的环境搭建,比较基础,但却非常 ...

  8. Android之EditText

    EditText 属性介绍: maxLength:设置最大输入字符数. hint:设置空白提示文字. textColorHint:设置空白提示文字的颜色. enabled:设置是否可编辑(可以获得焦点 ...

  9. DVDRW光驱无法读DVD刻录盘

    原文地址:http://www.douban.com/note/206741292/ 所有的DVD RW驱动器,不能识别DVD ROM光盘问题,都是因为DVD区域没有给定造成的,除非设备损坏!在计算机 ...

  10. Careercup - Facebook面试题 - 5733320654585856

    2014-05-02 09:59 题目链接 原题: Group Anagrams input = ["star, astr, car, rac, st"] output = [[& ...