php +js 滚屏加载技术

原创 2018年04月15日 18:41:51

滚屏加载技术笔记

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"替换为版本号;


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


jQuery滚屏加载_Ajax滚屏加载

  • 2015年04月04日 00:28
  • 24KB
  • 下载

仿微博 无限滚动加载技术

新浪微博网页自动底部加载的效果很酷吧?其实这种叫做“无限滚动的翻页技术”,当你页面滑到列表底部时候无需点击就自动加载更多的内容。 其实有很多jQuery的插件都已经实现了这个效果,我们来介绍几个...
  • wyqlxy
  • wyqlxy
  • 2013-06-25 15:31:27
  • 1474

thinkphp框架基于ajax,js的滚屏加载技术demo

  • 2016年07月26日 09:00
  • 1.18MB
  • 下载

jquery实现无刷新滚屏加载

第一个方法是判断页面是否滚动到了底部,若滚动到了底部则执行getData()方法获取新的数据。在getData()中用ajax传入页码,去后台中取数据。在这里,因为用的是YII框架,所以用的是Yii集...
  • sinat_29673403
  • sinat_29673403
  • 2016-11-17 09:32:15
  • 230

[FineReport]FineReport中如何实现自动滚屏效果

对于一些特殊的模板,可能为了展示的更加丰富、全面会在一个页面放置很多图表。表格等内容。由于内容过多,超出了浏览器窗口的大小导致内容展示不全的情况。这样我们就需要用到JS滚屏效果来解决,这里主要介绍在F...
  • david_520042
  • david_520042
  • 2017-03-13 20:03:40
  • 723

javascript实现页面滚屏效果

当我们浏览网页的时候,时常会碰到可以滚动屏幕的炫酷网页,今天笔者对这一技术进行简单实现,效果不及读者理想中那般炫酷,主要针对滚屏的技术原理和思想进行分享和分析。本示例在页面右侧有五个数字标签,代表五个...
  • zhongguohaoshaonian
  • zhongguohaoshaonian
  • 2016-09-22 20:51:30
  • 3639

js实现页面自动滚屏效果

  • 2012年12月23日 14:23
  • 3KB
  • 下载

thinkphp滚屏加载--无刷新动态加载数据技术的应用

我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览。这种技术我暂且称它为滚屏加载技术。我们发现很多网站用到这种技术,必应图片搜索、新浪微博、QQ空间等将该技术...
  • vailook
  • vailook
  • 2016-08-03 18:23:12
  • 697

前端开发——滚滚屏(没有纵向滚动条)

1.前端流程: 1)需求分析 2)原型图(低保真)——产品经理/设计师/策划绘制       3)做效果图 4)代码实现 2.优秀网站欣赏: 1)百度钱包  一分钱专享 :  https://1.ba...
  • luohuaxinyue
  • luohuaxinyue
  • 2016-04-05 22:55:15
  • 4429

滚屏加载----无刷新动态加载数据技术

我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览。这种技术我暂且称它为滚屏加载技术。我们发现很多网站用到这种技术,必应图片搜索、新浪微博、QQ空间等将该技术...
  • rongyongfeikai2
  • rongyongfeikai2
  • 2013-03-01 09:07:41
  • 784
收藏助手
不良信息举报
您举报文章:php +js 滚屏加载技术
举报原因:
原因补充:

(最多只允许输入30个字)