index.php代码  

[html] view plaincopy

<!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" />  

        <title>滚屏加载--无刷新动态加载数据技术的应用-www.corange.cn</title>  

        <style type="text/css">  

            #container{margin:10px auto;width: 660px; border: 1px solid #;}   

            .single_item{padding: 20px; border-bottom: 1px dotted #d3d3d3;}  

            .author{position: absolute; left: 0px; font-weight:bold; color:#39f}  

            .date{position: absolute; right: 0px; color:#}  

            .content{line-height:20px; word-break: break-all;}  

            .element_head{width: %; position: relative; height: 20px;}  

            .nodata{display:none; height:32px; line-height:32px; text-align:center; color:#; font-size:14px}  

        </style>  

        <script type="text/javascript" src="../jquery.js"></script>  

        <script type="text/javascript">  

            $(function() {  

                var winH = $(window).height(); //页面可视区域高度  

                var i = ;  

                $(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>  

    </head>  

    <?php   

    require_once('connect.php');   

    $user = array('demo1','demo2','demo3','demo3','demo4');   

    ?>   

    <div id="container">   

        <?php   

        $query=mysql_query("select * from comments order by id desc limit 0,15");   

        while ($row=mysql_fetch_array($query)) {   

        ?>   

        <div class="single_item">   

            <div class="element_head">   

                <div class="date"><?php echo date('m-d H:i',$row['addtime']);?></div>   

                <div class="author"><?php echo $user[$row['userid']];?></div>   

            </div>   

            <div class="content"><?php echo $row['content'];?></div>   

        </div>   

        <?php } ?>   

    </div>   

    <div class="nodata"></div>   

result.php代码

[php] view plaincopy在CODE上查看代码片派生到我的代码片

<?php  

require_once('connect.php'); //连接数据库   

   

$user = array('demo1','demo2','demo3','demo3','demo4');   

$page = intval($_GET['page']);  //获取请求的页数   

$start = $page*;   

$query=mysql_query("select * from comments order by id desc limit $start,15");   

while ($row=mysql_fetch_array($query)) {   

    $arr[] = array(   

        'content'=>$row['content'],   

        'author'=>$user[$row['userid']],   

        'date'=>date('m-d H:i',$row['addtime'])   

    );   

}   

echo json_encode($arr);  //转换为json数据输出   

?>  

connect.php代码

[php] view plaincopy在CODE上查看代码片派生到我的代码片

<?php  

$host="localhost";  

$db_user="root";  

$db_pass="";  

$db_name="demo";  

$timezone="Asia/Shanghai";  

  

$link=mysql_connect($host,$db_user,$db_pass);  

mysql_select_db($db_name,$link);  

mysql_query("SET names UTF8");  

?>  

Jquery鼠标滚动到页面底部自动加载更多内容,使用分页的更多相关文章

  1. Jquery+php鼠标滚动到页面底部自动加载更多内容,使用分页

    1.index.php <style type="text/css"> #container{margin:10px auto;width: 660px; border ...

  2. 当滚动条滚动到页面底部自动加载增加内容的js代码

    这篇文章主要介绍了如何使用javscript实现滚动条滚动到页面底部自动加载增加页面内容,需要的朋友可以参考下..1,注册页面滚动事件,window.onscroll = function(){ }; ...

  3. vue 实现滚动到页面底部开始加载更多

    直接上代码: <template> <div class="newsList"> <div v-for="(items, index) in ...

  4. jQuery+ajax实现滚动到页面底部自动加载图文列表效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. UWP-ListView到底部自动加载更多数据

    原文:UWP-ListView到底部自动加载更多数据 ListView绑定的数据当需要“更多”时自动加载 ListView划到底部后,绑定的ObservableCollection列表数据需要加载的更 ...

  6. vue使用H5实现滚动到页面底部时加载数据

    使用原生vue实现瀑布流,发现无法实现小程序那种滚动到地步触发加载效果,只能自己研究了 实现效果: 实现代码: 首先添加监听滚动事件 mounted() { window.addEventListen ...

  7. 实现Android ListView 自动加载更多内容

    研究了几个小时终于实现了Android ListView 自动加载的效果. 说说我是怎样实现的.分享给大家. 1.给ListView增加一个FooterView,调用addFooterView(foo ...

  8. Android ListView滑动底部自动加载更多

    直接上代码: // lv = (ListView) findViewById(R.id.lv); // // for(int i = 0;i < 50;i++){ // ls.add(" ...

  9. jquery 页面滚动到底部自动加载插件集合

    很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容.下面为你推荐 10 个 jQuery 的无限滚动的插件: 1. jQuery ScrollPa ...

随机推荐

  1. python 与 mysql

    1.开发环境: 1)CLion-2016.1.3 C/C++ 与 Python 混合编程 IDE,先安装好以下 2) 3) 编译器再关联 2)tdm-gcc-4.8.1-3 C/C++ 编译器 3)W ...

  2. WIN 2003服务器终极安全及问题解决方案

    一.硬盘分区与操 作系统的安装硬盘分区 总的来讲在硬盘分区上面没什么值得深入剖析的地方,无非就是一个在分区前做好规划知道要去放些什么东西, 如果实在不知 道.那就只一个硬盘只分一个区,分区要一次性完成 ...

  3. struts返回json

    <param name="includeProperties"> </param> 这个属性表示要包含进JSON数据中的数据.<param name= ...

  4. TCP和UDP的保护消息边界机制

    在socket网络程序中,TCP和UDP分别是面向连接和非面向连接的.TCP的socket编程,收发两端都要有一一成对的socket,因此,发送端为了将多个发往接收端的包,更有效的发到对方,使用了优化 ...

  5. 一种 Visual Studio 不能单步调试（函数调用）问题

    Visual Studio每次出"莫名其妙的问题"的时候都非常棘手.这次遇到这么一个问题: 新建的Windows的控制台窗口程序(C++),编译链接运行没有问题.但是想单步调试一下 ...

  6. 使用python在SAE上搭建一个微信应用，使用有道翻译的api进行在线翻译

    1. 准备,先在使用python一步一步搭建微信公众平台(一)中基本实现自动回复的功能后,接着在有道词典上申请一个key,http://fanyi.youdao.com/openapi?path=da ...

  7. 滑动菜单栏（一）开源项目SlidingMenu的使用

    本帖最后由 user1 于 2013-7-16 21:56 编辑 一.SlidingMenu简介相信大家对SlidingMenu都不陌生了,它是一种比较新的设置界面或配置界面的效果,在主界面左滑或者右 ...

  8. 初识suse-Linux相关！

    Linux这种系统很奇怪,差不多每种不同的版本,它所使用的安装等一些重要命令皆有所变化.假若,你要熟练掌握一种OS,那么如果安装软件/应用,那是入门的第一步. 安装命令中: RedHat.CentOS ...

  9. CUDA 6.5 && VS2013 && Win7：创建CUDA项目

    运行环境: Win7+VS2013+CUDA6.5 1.创建win32空项目 2.右键项目解决方案-->生成项目依赖项-->生成自定义 3.右键项目解决方案-->属性-->配置 ...

  10. C# 浅谈接口的优势

    总结了一下接口的小优势,可以便于新手理解为什么要用接口,用接口有什么好处. 1.接口的定义: 关键字:interface,接口名一般大写I开头,接口中定义方法,但是不实现方法 interface IB ...