瀑布流JQ特效代码

最新推荐文章于 2020-06-21 10:06:51 发布

原创最新推荐文章于 2020-06-21 10:06:51 发布 · 626 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #编程 #瀑布流 #jquery

本文分享了一段使用jQuery实现的瀑布流效果代码。通过鼠标滚动，图片会自动加载并填补空白，呈现错落有序的瀑布流布局。适合前端初学者参考学习。

自己在做java以前，自学过一段时间的前端，最近没事翻出来以前写过的一些前端的小案例，现在感觉也挺好玩，今天特地分享出来，感兴趣的朋友可以看看，虽然技术含量倒不是很多，但是回忆起当初自学过的那段经历，感觉还挺欣慰的，对于学习编程来说，自学真的挺煎熬的，但是要是真的能钻进去也就乐在其中了。

瀑布流的效果呢就是，鼠标向下滑，图片会自动加载，一直滑，图片自动补位空缺的地方，让图片错落有序的排列，如同看瀑布一般。

废话不多说上源码：

$(function(){

imgLocation()
var imgData = {"Data":[{"images":"0.jpg"},{"images":"1.jpg"},{"images":"2.jpg"},{"images":"3.jpg"},{"images":"4.jpg"},
						   {"images":"5.jpg"},{"images":"6.jpg"},{"images":"7.jpg"},{"images":"8.jpg"},{"images":"9.jpg"},
						   {"images":"10.jpg"},{"images":"11.jpg"},{"images":"12.jpg"},{"images":"13.jpg"},{"images":"14.jpg"},
						   {"images":"15.jpg"},{"images":"16.jpg"}]}//这里的images是图片的路径

$(window).scroll(function(){
	if(check()){
	$.each(imgData.Data,function(key,value){
		var oBox=$("<div>").addClass('box').appendTo($('#main'));
		var ooBox=$('<div>').addClass('pic').appendTo($(oBox));
		var oimg=$('<img>').attr('src','images/'+$(value).attr('images')).appendTo($(ooBox))//这里的value为原生JS对象所以转化为jQ对象
		})
		imgLocation()	
	}	
})

})

//判断是否需要加载
 function check(){
	var $lastboxs=$('#main>div').last();
	var lastHeight=$lastboxs.offset().top+Math.floor($lastboxs.outerHeight()/2);
	var scrollTop=$(window).scrollTop();
	var clientHeight=$(window).height();
	console.log(lastHeight+":"+scrollTop+":"+clientHeight)
	if(lastHeight<scrollTop+clientHeight)
		return true;

 }

//加载图片
function imgLocation(){
	var boxs=$("#main>div")
	 var imgWidth=boxs.eq(0).outerWidth(); 
	 var num=Math.floor($(window).width()/imgWidth)
	 $("#main").width(imgWidth*num).css("margin","0 auto")
	 var heightArr=[];

	 boxs.each(function(index,value){//each中的两个参数index如同for循环中的i，value为DOM对象是i对应的class为box的元素，
	 								 //如同for循环中的boxs[i]
	 	var h=boxs.eq(index).outerHeight();
	 	if(index<num){
	 		heightArr[index]=h;
	 	}else{
	 		var minHeight=Math.min.apply(null,heightArr)
	 		var minNum=$.inArray(minHeight,heightArr)//调用这个方法直接可以返回该数组中最小值的位置
	 		$(value).css({     //value本身为DOM对象所以不能直接用JQ方法,所以要将value转化为jq对象：$(value)所以加一个$()
	 			"position":"absolute",
	 			"left":imgWidth*minNum+"px",
	 			"top":minHeight+"px"
	 		})
	 		heightArr[minNum]=heightArr[minNum]+boxs.eq(index).outerHeight();
	 	}
	 })
}

下面是html标签部分：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JQ瀑布流</title>
	<link rel="stylesheet" href="JQpubu.css">
	<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
	<!-- <script type="text/javascript" src="jquery-2.2.3.min.js"></script> -->
	<script type="text/javascript" src="JQpubu.js"></script>
</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 class="box">
			<div class="pic">
				<img src="images/10.jpg" alt="">
			</div>
		</div>

		<div class="box">
			<div class="pic">
				<img src="images/11.jpg" alt="">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/12.jpg" alt="">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/13.jpg" alt="">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/14.jpg" alt="">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="images/15.jpg" alt="">
			</div>
		</div>

		<div class="box">
			<div class="pic">
				<img src="images/16.jpg" alt="">
			</div>
		</div>
	</div>
</body>
</html>

还有一点CSS的代码：

*{
	margin: 0;
	padding: 0;
}
#main{
	position: relative;
	margin: 0 auto;
}
#main .box{
	float: left;
	/*margin-left: 10px;
	margin-top: 10px;*/
	padding: 5px;
}
#main .box .pic img{
	width: 150px;
}
#main .box .pic{
	border: 5px solid #ddd;
	border-radius: 5px;
	padding: 5px;
	box-shadow: 0 0 5px #ddd;
}

本打算上传一个压缩包来着，但是找了找好像没找到在哪上传，所以代码就给的详细一点了，如果感兴趣的话可以看看。