jquery实现简单瀑布流代码

最新推荐文章于 2022-02-12 17:35:55 发布

blatar

最新推荐文章于 2022-02-12 17:35:55 发布

阅读量4.1k

点赞数

分类专栏： JavaScript 文章标签： jquery function class xhtml div chrome

本文链接：https://blog.csdn.net/blatar/article/details/8051673

版权

JavaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

测试环境：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>

blatar

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
jquery实现简单瀑布流代码

测试环境：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-tr
复制链接

扫一扫