Jquery鼠标滚动到页面底部自动加载更多内容,使用分页-白红宇

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

阅读量：6487 次

发布时间：2019-06-24

本文共 3236 字，大约阅读时间需要 10 分钟。

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 #

999;}

.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:#

999}

.content{line-height:20px; word-

break:

break-all;}

.element_head{width:

100%; position: relative; height: 20px;}

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

999; 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 =

var str = str +

" + array[

date

'] +

</div>

var str = str +

" + 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

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

demo4

');

$page = intval($_GET[

page

']);

获取请求的页数

$start = $page*

15;

$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

");

转载于:https://www.cnblogs.com/qhorse/p/4717726.html

你可能感兴趣的文章

ELK——安装 logstash 2.2.0、elasticsearch 2.2.0 和 Kibana 3.0

查看>>

Atitit.cateService分类管理新特性与设计文档说明v1

Android用路径api在内部存储读写文件

查看>>

PHP 实现对象的持久层，数据库使用MySQL

查看>>

Freemarker生成静态代码实例

查看>>

Ural 2036. Intersect Until You're Sick of It 计算几何

查看>>

视差效果原理 background-attachment:fixed

查看>>

【读书笔记《Bootstrap 实战》】5.电子商务网站

查看>>

PHP中“简单工厂模式”实例讲解

查看>>

SparkConf加载与SparkContext创建（源码阅读一）

模2运算的原理模2加法，模2减法，模2乘法，模2除法

查看>>

Couchbase的安装步骤

查看>>