您的位置：首页 > Web前端 > JQuery

jquery简单瀑布流实现原理及ie8下测试代码

2013-01-23 00:00 791 查看

测试环境：ie8 ff13.0.1 chrome22
可以将分页获取的内容依次填入四个div中，瀑布流的分页可以以多页（比如5页）为单位二次分页，这样可以减少后台算法的复杂度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title>waterfall flow</title> 
<script type="text/javascript" src="../jquery-1.8.0.min.js" /></script> 
<style type="text/css" > 
body{margin:0px;} 
#main{width:840px;margin:0 auto;} 
.flow{float:left;width:200px;margin:5px;background:#ABC;} 
</style> 
<script type="text/javascript" > 
$(document).ready(function(){ 
// 初始化内容 
for(var i = 0 ; i < 3 ; i++){ 
$(".flow").each(function(){ 
$(this).append("<div style=\"width:90%;height:"+getRandom(200,300)+"px;margin:5px auto;background:#159;\"></div>"); 
}); 
} 

$(window).scroll(function(){ 
// 被卷去的高度 
var scrollTop = document.body.scrollTop||document.documentElement.scrollTop; 
// 页面高度 
var pageHeight = $(document).height(); 
// 可视区域高度 
var viewHeight = $(window).height(); 
//alert(viewHeight); 
//当滚动到底部时 
if((scrollTop+viewHeight)>(pageHeight-20)){ 
if(scrollTop<1000){//防止无限制的增长 
for(var i = 0 ; i < 2 ; i++){ 
$(".flow").each(function(){ 
$(this).append("<div style=\"width:90%;height:"+getRandom(200,300)+"px;margin:5px auto;background:#159;\"></div>"); 
}); 
} 
} 
} 
}); 
}); 
/* 
* 获取指定范围随机数 
* @param min，最小取值 
* @param max，最大取值 
*/ 

function getRandom(min,max){ 
//x上限，y下限 
var x = max; 
var y = min; 
if(x<y){ 
x=min; 
y=max; 
} 
var rand = parseInt(Math.random() * (x - y + 1) + y); 
return rand; 
} 
</script> 
</head> 
<body> 
<div id="main"> 
<div class="flow" ></div> 
<div class="flow" ></div> 
<div class="flow" ></div> 
<div class="flow" ></div> 
</div> 
</body> 
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航