jquery瀑布流

最新推荐文章于 2022-06-14 17:56:49 发布

Seven_Cld

最新推荐文章于 2022-06-14 17:56:49 发布

阅读量494

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/Christine95/article/details/50014943

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

//主要的思想是用窗口宽度，图片宽度算出一共有几个列，并用一个数组记录每一个列
//最短的距离，并把下一个图片加载在这个最短的列中，重复这个过程。
//当下拉加载更多图片时，要判断是否有加载条件，加载条件的判断根据窗口高度，文档高度和滚动条高度来判断。

//这里只是静态的添加图片，其实可以改进用ajax来动态从后台读取数据并加载。

js文件

$(window).on('load', function(event) {
	fall();
	
	//判断是否可以向下滚动加载
	$(window).scroll(function(event) {
		if(checkScroll()){
			//图片地址
			$data = [{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"}];
			
			//加入到对应的盒子到main下
			var oBox = "<div class='box'><div class='pic'><img src='' alt='' /></div></div>";	
			$.each($data,function(index, el) {
				$newBox = $(oBox).appendTo("#main");
				$newBox.find("img").attr('src', "./images/"+$(el).attr('src'));
			});	
			fall();
		}
	});

	
});

function checkScroll(){
	$main = $("#main");
	$lastBox = $("#main>div").last();

	$lastBoxDis = $lastBox.offset().top + Math.floor($lastBox.outerHeight()/2);
	$windowH = $(window).height();
	$scrollTop = $(window).scrollTop();

	//如果滚动的距离大于了文档的高度-窗口的高度，返回true表示达到了可以加载的情况
	return $lastBoxDis<($windowH+$scrollTop)?true:false;
}

function fall(){
	$main = $("#main");
	$box  = $("#main>div");
	
	//获取整个页面的宽度
	$windowWidth = $(window).width();
	//获取盒子的高度
	$boxWidth = $box.eq(0).outerWidth();
	//获取列的个数
	$cols = Math.floor($windowWidth/$boxWidth);
	//设置瀑布流在中间
	$main.css({
		"width": $cols*$boxWidth,
		"margin": "0 auto"
	});
	//用于存放每一列的高度
	$arr =[];
	//遍历每个盒子，把盒子放在该放的位置上
	$box.each(function(index, el) {
		if(index < $cols){
			//对应每一列的高度的初始化
			$arr[index] = $(el).outerHeight();
		}else{
			//取出数组中最小的值，对应下一个图片，就在这一列下面
			$minHeight = Math.min.apply(null,$arr);
			//$.inArray是jquery中直接找对应索引的值
			$minIndex = $.inArray($minHeight, $arr);
			//获取元素距离左侧的高度
			$minLeft = $minIndex*$boxWidth;
			//对元素定位
			$(el).css({
				"position":"absolute",
				"top": $minHeight,
				"left": $minLeft
			});
			//更改新列高度的值
			$arr[$minIndex] += $(el).outerHeight();
		}
	});		
}

这里有几个注意的地方：

1.width和outWidth的区别，outWidth还会算入盒子的padding等，而width不会。

2.Math.min.apply则是获取一个数组中最小的元素值

3.$.inArray则是查找一个元素在数组中的索引位置。

4.css定位的时候不要忘了absolute。添加一个新的图片后要更新数组大小。

html文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="./css/index.css" />
</head>
<body>
	<div id="main">
		<div class="box">
			<div class="pic">
				<img src="images/0.jpg" alt="" />
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/1.jpg" alt="" />
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/2.jpg" alt="" />
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/3.jpg" alt="" />
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/4.jpg" alt="" />
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/5.jpg" alt="" />
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/6.jpg" alt="" />
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/7.jpg" alt="" />
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/8.jpg" alt="" />
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/9.jpg" alt="" />
			</div>
		</div>
		
	</div>
	<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="./js/index.js"></script>
</body>
</html>

Seven_Cld

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery瀑布流

//主要的思想是用窗口宽度，图片宽度算出一共有几个列，并用一个数组记录每一个列//最短的距离，并把下一个图片加载在这个最短的列中，重复这个过程。//当下拉加载更多图片时，要判断是否有加载条件，加载条件的判断根据窗口高度，文档高度和滚动条高度来判断。//这里只是静态的添加图片，其实可以改进用ajax来动态从后台读取数据并加载。js文件$(window).on('load',
复制链接

扫一扫