php +js 滚屏加载技术

最新推荐文章于 2021-04-08 04:44:54 发布

朝歌1122

最新推荐文章于 2021-04-08 04:44:54 发布

阅读量845

点赞数

分类专栏： php js

本文链接：https://blog.csdn.net/qq_40452317/article/details/79951556

版权

php 同时被 2 个专栏收录

8 篇文章 1 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

滚屏加载技术笔记

Js获取浏览器高度宽度等数据

document.body.clientWidth ==> BODY对象宽度

document.body.clientHeight ==> BODY对象高度

document.documentElement.clientWidth ==> 可见区域宽度

document.documentElement.clientHeight ==> 可见区域高度

（浏览器窗口显示网页的部分（即不包括地址栏、工具栏）就是可视区）

网页可见区域宽： document.body.clientWidth;

网页可见区域高： document.body.clientHeight;

网页可见区域宽： document.body.offsetWidth (包括边线的宽);

网页可见区域高： document.body.offsetHeight (包括边线的宽);

网页正文全文宽： document.body.scrollWidth;

网页正文全文高： document.body.scrollHeight;

网页被卷去的高： document.body.scrollTop;

网页被卷去的左： document.body.scrollLeft;

网页正文部分上： window.screenTop;

网页正文部分左： window.screenLeft;

屏幕分辨率的高： window.screen.height;

屏幕分辨率的宽： window.screen.width;

屏幕可用工作区高度： window.screen.availHeight;

屏幕可用工作区宽度：window.screen.availWidth;

判断滚动条到达底部（滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight）

function getScrollTop(){

var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;

if(document.body){

bodyScrollTop = document.body.scrollTop;

}

if(document.documentElement){

documentScrollTop = document.documentElement.scrollTop;

}

scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;

return scrollTop;

}//文档的总高度function getScrollHeight(){

var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;

if(document.body){

bodyScrollHeight = document.body.scrollHeight;

}

if(document.documentElement){

documentScrollHeight = document.documentElement.scrollHeight;

}

scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;

return scrollHeight;

}function getWindowHeight(){

var windowHeight = 0;

if(document.compatMode == "CSS1Compat"){

windowHeight = document.documentElement.clientHeight;

}else{

windowHeight = document.body.clientHeight;

}

return windowHeight;

}window.onscroll = function(){

if(getScrollTop() + getWindowHeight() == getScrollHeight()){

alert("已经到最底部了！!");

}

};

//jquery

$(window).scroll(function(){

var scrollTop = $(this).scrollTop();

var scrollHeight = $(document).height();

var windowHeight = $(this).height();

if(scrollTop + windowHeight == scrollHeight){

alert("已经到最底部了！");

}

});

用js时间判断滚动条已经到底了，，就会触发事件，从数据库取出多少条数据，显示到页面。

$.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;
                }
            });
        }

    });

关于$.getJSON的用法，可以参考下面的文章。

http://2806814127.iteye.com/blog/2316795

完整代码：（这代码是在网上找的，在此参考学习）

index.php

<?php
require_once('connect.php');
$user = array('demo1','demo2','demo3','demo3','<de></de>mo4');
?>
<!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" xml:lang="en">
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>滚屏加载技术</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-1.8.3.min.js"></script>

</head>
<body>
    <div id="container">
        <?php
        $query=mysqli_query($link, "select * from say order by id desc limit 0,15");
        while ($row=mysqli_fetch_array($query, MYSQLI_ASSOC)) {
        ?>
        <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>
</body>
<script type="text/javascript">
$(function(){
    var winH = $(window).height();
    var i = 1;
    $(window).scroll(function () {
        var pageH = $(document.body).height();
        var scrollT = $(window).scrollTop();
        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>
</html>

数据库：

ajax_demo.sql
-- phpMyAdmin SQL Dump
-- version 3.5.2.2
-- http://www.phpmyadmin.net
--
-- 主机: localhost
-- 生成日期: 2015 年 01 月 18 日 15:56
-- 服务器版本: 5.1.46-community
-- PHP 版本: 5.2.13
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
--
-- 数据库: `demo`
--
-- --------------------------------------------------------
--
-- 表的结构 `say`
--
CREATE TABLE IF NOT EXISTS `say` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`userid` int(11) NOT NULL DEFAULT '0',
`content` varchar(200) NOT NULL,
`addtime` int(10) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=63 ;
--
-- 转存表中的数据 `say`
--
INSERT INTO `say` (`id`, `userid`, `content`, `addtime`) VALUES
(1, 0, '爱爱爱', 1421332482),
(2, 1, '爱爱爱', 1421332482),
(3, 0, '爱爱爱', 1421332482),
(4, 1, '爱爱爱', 1421332482),
(5, 0, '爱爱爱', 1421332482),
(6, 0, '爱爱爱', 1421332482),
(7, 0, '爱爱爱', 1421332482),
(8, 2, '爱爱爱', 1421332482),
(9, 0, '爱爱爱', 1421332482),
(10, 0, '爱爱爱', 1421332482),
(11, 0, '爱爱爱', 1421332482),
(12, 0, '爱爱爱', 1421332482),
(13, 0, '爱爱爱', 1421332482),
(14, 0, '爱爱爱', 1421332482),
(15, 0, '爱爱爱', 1421332482),
(16, 0, '爱爱爱', 1421332482),
(17, 0, '爱爱爱', 1421332482),
(18, 0, '爱爱爱', 1421332482),
(19, 0, '爱爱爱', 1421332482),
(20, 0, '爱爱爱', 1421332482),
(21, 0, '爱爱爱', 1421332482),
(22, 0, '爱爱爱', 1421332482),
(23, 0, '爱爱爱', 1421332482),
(24, 0, '爱爱爱', 1421332482),
(25, 0, '爱爱爱', 1421332482),
(26, 0, '2222', 1421333156),
(27, 0, '2222', 1421333159),
(28, 0, '2222', 1421333161),
(29, 0, '2222', 1421333162),
(30, 0, '2222', 1421333164),
(31, 0, '2222', 1421333165),
(32, 0, '2222', 1421333167),
(33, 0, '2222', 1421333168),
(34, 0, '2222', 1421333169),
(35, 0, '2222', 1421333170),
(36, 0, '2222', 1421333172),
(37, 0, '2222', 1421333173),
(38, 0, '2222', 1421333175),
(39, 0, '2222', 1421333176),
(40, 0, '2222', 1421333177),
(41, 0, '2222', 1421333178),
(42, 0, '2222', 1421333179),
(43, 0, '2222', 1421333181),
(44, 0, '2222', 1421333182),
(45, 0, '2222', 1421333183),
(46, 0, '2222', 1421333184),
(47, 0, '2222', 1421333293),
(48, 0, '2222', 1421333295),
(49, 0, '2222', 1421333296),
(50, 0, '2222', 1421333297),
(51, 0, '2222', 1421333298),
(52, 0, '2222', 1421333299),
(53, 0, '2222', 1421333300),
(54, 0, '2222', 1421333302),
(55, 0, '2222', 1421333303),
(56, 0, '2222', 1421333304),
(57, 0, '2222', 1421333305),
(58, 0, '2222', 1421333306),
(59, 0, '2222', 1421333308),
(60, 0, '2222', 1421333309),
(61, 0, '2222', 1421333310),
(62, 0, '2222', 1421333311);
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

connect数据库

<?php
$host="localhost";
$db_user="root";
$db_pass="admin";
$db_name="ajax_demo";
$timezone="Asia/Shanghai";
$link=mysqli_connect($host,$db_user,$db_pass);
mysqli_select_db($link, $db_name);
mysqli_query($link, "SET names UTF8");
header("Content-Type: text/html; charset=utf-8");
?>

result.php(

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

$user = array('demo1','demo2','demo3','demo3','demo4');
$page = intval($_GET['page']); //获取请求的页数
$start = $page*15;
$query=mysqli_query($link, "select * from say order by id desc limit $start,15");
/* while ($row=mysqli_fetch_array($query)) {
    $arr[] = array(
        'content'=>$row['content'],
        'author'=>$user[$row['userid']],
        'date'=>date('m-d H:i',$row['addtime'])
    );
} */
if($query){
    while ($row=mysqli_fetch_array($query)) {
        $arr[] = array(
            'content'=>$row['content'],
            'author'=>$user[$row['userid']],
            'date'=>date('m-d H:i',$row['addtime'])
        );
    }
}
if(!empty($arr)){
    echo json_encode($arr); //转换为json数据输出
}
//echo json_encode($arr); //转换为json数据输出
?>

注意：

如果没成功，可能是没有引用jQuery。

jquery是结构化的开源js文件，按照js文件引用方式使用。

1、可以到jQuery官网http://jquery.com/download 下载js文件到项目中(附件中上传了一个1.8.3版本的jquery文件)，然后使用相对路径引用：<script src='your path'></script>；

2、直接引用网上现有的js文件

官方的：<script src="http://code.jquery.com/jqueryversion.js"></script> 注："jqueryversion"替换为版本号；

google的：http://ajax.googleapis.com/ajax/libs/jquery/jqueryversion/jquery.js 注："jqueryversion"替换为版本号；

这是我根据网上的资料学习的笔记。其中代码是参考他人的。

朝歌1122

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
php +js 滚屏加载技术

滚屏加载技术笔记Js获取浏览器高度宽度等数据document.body.clientWidth ==&gt; BODY对象宽度document.body.clientHeight ==&gt; BODY对象高度document.documentElement.clientWidth ==&gt; 可见区域宽度document.documentElement.clientHeight ==&gt; ...
复制链接

扫一扫