php下拉自动加载机制,$.ajax+php实战教程之下拉时自动加载更多文章原理分析

摘要：

这篇文章将介绍自动加载数据的原理及实现方法，原理过后会附带一个简单的案例进行实战。明日会讲ajax与php结合请求数据步骤......

一、纠结文章的风格

话说艺灵这个网站成立到现在快3年了，3年来，没怎么盈利。艺灵坚持不定期更新文章，对于文章的风格也在不断的调整。也不知道看官们都喜欢什么风格的文章，一直也没有看官反馈意见......

今天呢，艺灵将再次更换一种全新的风格--尝试采用由浅入深，由原理到简单案例再到实战流程的风格写一些教程文章。欢迎各位看官提出自己宝贵的意见。至于文章风格的改变，无疑是艺灵想尽可能让看官能够更直白、更清楚的明白文章讲的是什么、有什么用途以及看官能够学到些什么。(如果看官觉得读完文章后有所收获，可以拿起手机扫下文章下面的付款码，赞助下艺灵的付出，谢谢。)

二、引入案例

2.1、引入案例

不知道看官们玩qq空间不，如果玩过qq空间的看官应该能看到这样一个现象：浏览好友动态时，快浏览到最下面的时候，系统会自动加载一批好友动态。配结构图一张：

今天呢，我们将来分析这个效果的原理，然后做一个简单的案例，明天再结合php+sql进行一个真实的案例讲解。

三、准备工作

我们还是先来看下如果想要实现这个功能都需要具备些什么吧！

1、任意一款编辑器，例如：Dreamweaver、HBuilder、Sublime Text、EditPlus、Notepad++等；

2、会div+css布局；

3、有js或jq基础；

4、会使用ajax；

5、会php及sql语句查询；

下面我们将针对上面的准备工作进行一一突破！

3.1、解决编辑器问题

编辑器这玩意儿，就不需要多说了吧。直接上网搜索就是，然后下载下来后进行解压、安装之类的步骤。如果看官不会此步骤，建议浏览文章→→Dreamweaver Cs6安装，按照文章来进行安装Dreamweaver软件。

3.2、解决div+css布局问题

前面说过，今天只讲一个简单的案例，所以我们只需要一个简单的布局即可。布局的话就以上面的分析图为例。在上代码前，艺灵建议看官根据上面的分析图进行自己写代码，标签随便用，但要注意核心内容。

3.2.1、html布局

默认展示的内容

点击加载更多内容......

有了布局，我们还需要css对其进行美化。

3.2.2、css样式

.main{width:1190px;border:1px solid #ccc;margin:10px auto}

.main-body,.ylsj-main{height:1600px;background:#ddd;margin:0 auto}

.ylsj-main{background:#B5F3C3;}

#ylsj-load{width:90%;border:1px solid #ccc;height:40px;line-height:40px;margin:10px auto;font-size:12px;color:#888;border-radius:8px;text-align:center}

来张上面源码展示的效果图吧！配图：

好了，布局这一步也搞定了，接下来开始有点难度了哦！

四、js/jq做什么？

不知道看官有没有注意，此时艺灵已将jq单独拿出来讲了，毕竟这个不是一两行代码就能说得清的。我们还是来进行进一步分析下这个案例的效果吧！

默认情况下，我们从上向下浏览好友动态，此时如同浏览正常网页；当快浏览完好友动态时，普通的网页是见到了底部，已经没有内容了，而腾讯的呢？他是自动又进行了加载，然后将数据插入到页面中，由于页面有了新的数据，所以此时浏览器滚动条距离底部还有很长一段距离，此时我们仿佛又回到了之前的状态，继续下拉浏览。当再次快要拉到底的时候，数据又进行加载并填充，然后又是继续浏览，如此反复......

那么问题来了！

1、如何知道用户快要浏览完内容呢？

2、快浏览完时怎么去触发自动加载事件呢？

既然有问题，那我们就得去解决问题。

不知道看官有没有注意刚才艺灵的描述，描述中有一个关键点滚动条！

那滚动条可干嘛呢？在我们这个案例中起什么作用呢？

我们可以计算滚动条距离页面顶部的距离呀！

计算这个距离有什么用呢？

单独这个距离是没什么用，但别忘记了，html源码中还有一个#ylsj-load的标签！有没有发现上面的配图中并没有看到这个#ylsj-load？

咦！对啊，我怎么没有看到呢？去哪儿了？

没有看到就对了，要是看到了，那就起不到作用了！

之所以看到不到，是因为他在下面，被默认内容撑下去了。前面说了，浏览器滚动后可以得出一个滚动的高度，此时这个#ylsj-load距离顶部也是有一个高度的。当#ylsj-load快要显示的时候也就表示着快到拉到底了，配图：

此时我们就需要去触发加载了。

至此，我们刚提的两个问题就已经解决了，现在来写jq代码吧！

4.1、jq判断是否快到拉到底部

4.1.1、jq判代码

/*页面滚动*/

$(window).scroll(function(){

var t=$(this).scrollTop();/*获取滚动时距离浏览器顶部的值*/

var h=$(this).height();/*获取当前窗口的高度*/

var h1=$('#ylsj-load').offset().top;/*获取按钮距离浏览器顶部的值*/

/*用按钮的值-滚动条的值与窗口高度进行比较，如果小时，则表示按钮进入可视区，同时也表示滚动条即将到达底部*/

if(h1-t

/*弹出一个窗口，提示用户下面没有内容了*/

alert('别往下拉了，下拉就没有了！');

}

});

此时我们去刷新页面，尝试向下拉动滚动条，快到底部时可以看到有弹窗提示。配图：

既然可以看到弹窗，表示我们的js代码成功了。接下来就是添加数据了。

4.2、触发点击事件添加数据

今天我们不讲ajax和php，明天再讲。今天只讲一个简单的点击加载数据操作。

由于我们今天没有数据，那就用一个盒子充当数据吧。

现在数据有了，但又有新的问题！

1、点击事件怎么写？

2、新的“数据”如何插入到页面中？

4.2.1、点击事件

$('#ylsj-load').click(function(){

alert('点我想干嘛？加载数据？？');

});

此时我们手动去点击“点击加载更多内容......”这个按钮会看到有弹窗提示，配图：

4.2.2、插入内容

$(this).before('

加载的数据外框架');

我们将上面的代码放到4.2.1中，替换掉原alert弹框。再次点击时配图：

好了，差不多了。但是有一个问题：现在是点击才去进行加载，如何做到让他自动加载呢？？？

这个作为今天的作业吧。友情提示：建议回头看4.1.1的代码片段。明日会继续进行后续讲解。

4.3、今日案例欣赏

今日案例欣赏(bug及后续操作见明日教程)：

----------完----------

转载声明：

若亲想转载本文到其它平台，请务必保留本文出处！

本文链接：http://www.yilingsj.com/jquery/2016-05-11/395.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。