Jquery滚动条事件的处理

官方文档看这里:http://api.jquery.com/scroll/

获取浏览器和页面文档的宽度和高度:

//获取浏览器显示区域的高度
$(window).height();
//获取浏览器显示区域的宽度
$(window).width();
//获取页面的文档高度
$(document.body).height();
//获取页面的文档宽度
$(document.body).width();

 

获取滚动条的位置:

//获取滚动条到顶部的垂直高度
$(document).scrollTop();
//获取滚动条到左边的垂直宽度
$(document).scrollLeft();

 

目的:使用 Jquery的 scroll事件,实现当滚动条距离底部小于一定像素时,自动加载新项。(瀑布流效果)

原理:滚动条事件中,判断是否到达最底部,是的话调用添加方法,异步向尾部追加内容。

源码:

———————————————————————————————————————————————-

<!DOCTYPE html>

<html lang=”zh-CN”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<title>美购美测试 | www.meigoumei.com</title>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<link rel=”shortcut icon” href=”favicon.ico” />

<link rel=”stylesheet” href=”bootstrap.min.css” media=”screen”>

<link rel=”stylesheet” href=”bootstrap-responsive.min.css” media=”screen”>

<!– HTML5 shim, for IE6-8 support of HTML5 elements –>

<!–[if lt IE 9]>

<script src=”html5shiv.js” type=”text/javascript”></script>

<![endif]–>

</head>

<body>

<div class=”container-fluid”>

<div class=”row-fluid”>

<div class=”span12″>

<div id=”item_container” class=”row-fluid”>

<div class=”span4″>

<ul class=”thumbnails”>

<div class=”thumbnail”>

<img src=”http://placehold.it/300×200″>

</div>

</ul>

<ul class=”thumbnails”>

<div class=”thumbnail”>

<img src=”http://placehold.it/300×300″>

</div>

</ul>

<ul class=”thumbnails”>

<div class=”thumbnail”>

<img src=”http://placehold.it/300×400″>

</div>

</ul>

</div><!–/span–>

<div class=”span4″>

<ul class=”thumbnails”>

<div class=”thumbnail”>

<img src=”http://placehold.it/300×400″>

</div>

</ul>

<ul class=”thumbnails”>

<div class=”thumbnail”>

<img src=”http://placehold.it/300×300″>

</div>

</ul>

<ul class=”thumbnails”>

<div class=”thumbnail”>

<img src=”http://placehold.it/300×500″>

</div>

</ul>

</div><!–/span–>

<div class=”span4″>

<ul class=”thumbnails”>

<div class=”thumbnail”>

<img src=”http://placehold.it/300×500″>

</div>

</ul>

<ul class=”thumbnails”>

<div class=”thumbnail”>

<img src=”http://placehold.it/300×400″>

</div>

</ul>

<ul class=”thumbnails”>

<div class=”thumbnail”>

<img src=”http://placehold.it/300×200″>

</div>

</ul>

</div><!–/span–>

</div><!–/row–>

</div><!–/span–>

</div><!–/row–>

</div><!–/.fluid-container–>

<script src=”jquery-1.9.1.min.js” type=”text/javascript”></script>

<script src=”bootstrap.min.js” type=”text/javascript”></script>

<script type=”text/javascript”>

var global_flag = false;

var item_num = 10;

var counter_flag = 0;

function loading(){

if(global_flag) return;

var height0 = $(‘#item_container .span4:eq(0)’).height();

var height1 = $(‘#item_container .span4:eq(1)’).height();

var height2 = $(‘#item_container .span4:eq(2)’).height();

var random_int = Math.round(Math.random()*5+0.5);//1到5之间的随机数

// var random_col = Math.round(Math.random()*3+0.5)-1;//0到2之间的随机数

var shortest = Math.min(height0,height1,height2);//最短的一列

if(shortest==height0){

var random_col = 0;

}else if(shortest==height1){

var random_col = 1;

}else if(shortest==height2){

var random_col = 2;

}

var html = ”;

html += ‘<ul class=”thumbnails”>’+

‘<div class=”thumbnail”>’+

‘<img src=”http://placehold.it/300x’+random_int.toString()+’00”>’+

‘</div>’+

‘</ul>';

$(‘#item_container .span4:eq(‘+random_col.toString()+’)’).append(html);

}

$(document).ready(function(){

$(window).scroll(function (){

if( $(document).height()-$(document).scrollTop()-$(window).height()<100 ){

loading();

}

});

});

</script>

</body>

</html>

About 智足者富

http://chenpeng.info

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>