推荐这篇日记的豆列
······无插件实现动态瀑布流加载数据
以前在页面中动态加载帖子数据使用了waterfall.js插件，当初折腾了不少时间才搞定，这次又有一个页面需要动态加载数据，自然想到了waterfall插件，但是结果很不理想，waterfall的很多参数不管是什么用处，反正看着很头疼，最麻烦的是它会改变页面样式和布局，实在不想调整了，还是自己实现这个功能吧！
首先看下面代码：
var pageIndex = 2;
(function loadmore(){
//绑定滚动事件
$(window).bind("scroll", function(){
if($(this).scrollTop() + $(window).height() + 40 &= $(document).height() && $(this).scrollTop() &= 40) {
$(window).unbind("scroll");//到底后先移除滚动事件
$.get("/portal/getTopic?pageIndex=" + pageIndex + "&pageSize=3", function(data){
$("#container").append(data);
pageIndex++;
loadmore();//数据加载成功重新绑定滚动事件
}, "html");
没错，就这么点，这已经是实现功能的最简单版本了。代码的基本流程是给页面绑定滚动事件，判断是否滚动到最底部，然后加载数据。但实际上并不是这么简单就能行的，有很多意外情况需要解决。
先来说明如何判断页面是否滚动到最底部，$(this).scrollTop()用来计算滚动条顶端距离窗口顶部的距离，整个滚动条高度大约等于整个页面高度。当滚动条滚动到最底部的时候，滚动条顶端距离窗口顶部并不是整个页面的高度，还需要加上当前窗口所占高度才是整个页面正真的高度。所以就是$(this).scrollTop()
$(window).height()=$(document).height()，但是我们为什么还要加40呢？因为一般滚动到底部加载并不是完全要滚动到最低端才加载，而是差不多已经到底的时候就要开始加载，既然是差不多到底那么$(this).scrollTop()
+ $(window).height()就是还不完全等于整个页面高度，因为还有40没有滚动，所以加上了才是整个页面高度。此时滚动到距离最底部还有40像素的时候，再滚动一点就会大于页面高度，就该加载数据了。代码中还有&&
$(this).scrollTop() &=
40是为了监听有滚动发生，总不能在没有滚动事件发生时就加载。
已经能够监听到是否滚动到底部了，但是滚动事件是稍微滚动一点就能触发好多次，就会请求好多次数据，就算数据没有返回稍微滚动就会继续发送同样请求，所以在数据没有返回之前要把监听滚动移除掉，$(window).unbind("scroll");等数据添加到页面以后再重新绑定滚动事件。
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。jquery页面滚动事件的使用_脚本技术_前端技术
您的位置： &
& 详细内容
　　在现在更加追加页面加载速度和用户体验的情况下，页面的滚动事件使用的越来越多。通常我们使用滚动事件主要做的事情主要有：
ajax异步加载，加快页面首次加载的速度
懒加载（或延迟加载）：先把HTML元素放到textarea标签中，或把img的链接先放到一个字段里，页面滚动到某个位置时才进行开始加载
顶部导航或侧边导航的焦点跟踪
侧边数字导航的跟踪（例如百度经验）
&回到顶部&功能
　　这两天做了一个demo，大家可以参考一下：
&　　上图中指出了用滚动事件实现的功能，不过demo中没有实现异步加载的功能，其实懒加载和异步加载的原理差不多，只不过一个是先把数据请求了只是不加载，一个是滚动到位置了才用ajax请求数据。
　　在这里我讲一下这些功能的实现方式：
　　1. 顶部导航的焦点追踪
　　焦点的追踪，顾名思义：当我们移动到哪个区域时，焦点就移动到哪个导航元素上，指示我们当前查看的是哪个区域。当然，这个功能的前提是我们需要知道每个元素距内容顶部的高度。
// 获取每个item距顶部的高度,$item为区域的综合，listTop用来存储每个区域距顶部的高度
$item.each(function(index, el) {
listTop.push($(el).offset().top); });
　　我们从demo中也能看到，当aaaa区域到达顶部时，导航的position变成fixed，然后开始跟踪；滚动条向上滑动，aaaa离开顶部时，导航重新变回原来的样式。其 实，这只是我们看到是这个样子，导航的样式切换来切换去。但实际上我们并不是这样实现的，实际中这是两个导航（O(&_&)O~），只不过让其中一个导航 （称为A）不动，另一个导航（称为B）显示隐藏而已，导航B填充导航A的内容即可。在获取了这些item距顶部的高度后，那么我们就在滚动事件中判断，滚 动条的高度是否超过了第一个item的高度，如果超过导航B显示即可，否则导航B隐藏（代码中.navfix即导航B，winTop为滚动条的高度）。
// 是否显示顶部导航
winTop & listTop[0] ? $(&.navfix&).hide() : $(&.navfix&).show();
　　现在重点来了，导航B显示出来了，那么就需要当前所在的区域和焦点对应上：刚才我们已经获取到每个区域的高度了，现在我们就计算一下滚动条的高度在哪个区间（编号K），计算出区间后，我们就可以给哪个导航元素相应的样式了：
winTop&listTop[0] &： 不在任何区域
winTop&=listTop[0] && winTop&listTop[1] : 在区域aaaa
winTop&=listTop[1] && winTop&listTop[2] : 在区域bbbb
winTop&=listTop[2] && winTop&listTop[3] : 在区域ccccc
inTop&=listTop[3] : 在区域dddd
// 检测所在区域
for (; i & i++) {
&&& if ( winTop & listTop[t-1] ) {
&&&&&&& k = t-1;
&&& }else if ( winTop&=listTop[i-1] && winTop & listTop[i] ) {
&&&&&&& k = i-1;
// 顶部导航效果
if( k & -1 ){
&&& $li.removeClass("hover");
&&& $li.eq(k).addClass("hover");
　　k默认的是-1，即不在任何区域，若k&-1即肯定处在某个区域内，先清除导航中所有元素的样式，然后再指定样式
　　2. 侧边数字导航
　　其实侧边数字导航与顶部导航实现的原理一样：数字侧边栏也是有两个（跟着区域移动的数字导航A，固定导航B），当某个数字跟着区域移动时，导航 B中相应的数字隐藏；当数字到达顶部时，导航A中的数字隐藏，导航B中的数字显示；即使区域的数字到达顶部不再移动，那也不能立即变成灰色，应当还是绿 色，只有该区域超过窗口上边框才能变成蓝色。这就形成了我们现在看到的效果。
　　这里的重点是计算出什么时候隐藏导航A中的数字，显示导航B中的数字，而且导航B的数字显示什么颜色：每次滚动时，都首先让导航A中的数字显 示，导航B的数字隐藏，然后计算每个区域所在的位置，如果某个区域距顶部的高度与滚动条的高度小于了导航B的数字的高度，就说明导航A中的数字该隐藏，导 航B的数字该显示了；那显示的数字呈现什么颜色呢，刚才我们计算出了当前所在区域的编号K，那么区域编号小于编号K都是已经看过的，就显示灰色，否则就是 正在看或者没看的区域就显示绿色。
// 侧边数字导航
$item.find(&.item-icon&).show();&&& // 跟着区域移动的数字
$step_a.css("visibility", "hidden");// 固定导航的数字
for(i=0; i&t; i++){
&&& if(listTop[i]-winTop&i*32+35){
&&&&&&& $item.eq(i).find(&.item-icon&).hide();
&&&&&&& $step_a.eq(i).css({"visibility":"visible", "background-color": (i&k?"#888":"#008B00") });
　　3. 懒加载
　　通常加载DOM元素时需要对页面进行渲染，耗费时间，那么我们就先把这些DOM元素存储起来，等需要加载的时候再去加载，用来加快页面初始的加载；img图片同理。
// 懒加载底部内容
if( $copyright.attr(&loaded&)!=&loaded& && (winTop+800 & copyTop)){
&&& var text = $copyright.find("textarea").val();
&&& $copyright.html(text);
&&& $copyright.attr(&loaded&, &loaded&);
　　图片的路径我们可以先放到一个字段中，比如data-src，等需要加载该图片时，则从data-src中取出该值并赋值给src，然后请求图片.
　　4. &回到顶部&功能
　　&回到顶部&功能，即将scrollTop的值设置为0的过程，如果需要缓冲效果，那么就给它一个缓冲时间
// 回到顶部
$(&#backtotop&).on("click", function(event) {
&&& event = event
&&& var winTop = $(window).scrollTop();
&&& $("body").animate({scrollTop:0}, winTop/4);
&&& event.preventDefault();
　　当然，这里还有一些东西没有提到，不过也很重要，比如如何固定滚动条不能移动，回到顶部里的小三角的制作等等；
( 02:43:36)
( 02:43:34)
( 02:43:32)
( 02:33:18)
( 01:53:32)
( 15:04:07)
( 15:04:05)
( 18:52:52)
相关排行总榜}