jquery简单瀑布流实现原理及ie8下测试代码
jquery简单瀑布流实现原理及ie8下测试代码
发布时间:2016-12-30 来源:查字典编辑
摘要:测试环境:ie8ff13.0.1chrome22可以将分页获取的内容依次填入四个div中,瀑布流的分页可以以多页(比如5页)为单位二次分页,...

测试环境: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+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+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 ></div>

<div ></div>

<div ></div>

<div ></div>

</div>

</body>

</html>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类