提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

jQuery原理 实现 简单 IE8 瀑布 测试代码
2023-06-13 09:14:44 时间
测试环境：ie8ff13.0.1chrome22
可以将分页获取的内容依次填入四个div中，瀑布流的分页可以以多页（比如5页）为单位二次分页，这样可以减少后台算法的复杂度
复制代码代码如下:

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

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

functiongetRandom(min,max){
//x上限，y下限
varx=max;
vary=min;
if(x<y){
x=min;
y=max;
}
varrand=parseInt(Math.random()*(x-y+1)+y);
returnrand;
}
</script>
</head>
<body>
<divid="main">
<divclass="flow"></div>
<divclass="flow"></div>
<divclass="flow"></div>
<divclass="flow"></div>
</div>
</body>
</html>

相关文章