jquery实现瀑布流

最新推荐文章于 2024-02-23 09:32:17 发布

武凌渡情劫

最新推荐文章于 2024-02-23 09:32:17 发布

阅读量242

点赞数

分类专栏：笔记文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_35146837/article/details/128743663

版权

笔记专栏收录该内容

60 篇文章 0 订阅

订阅专栏

我们一起来看一下如何用jquery实现瀑布流，上次我用js实现过瀑布流：
添加链接描述
这次来看一下用jquery实现的全部过程：

<style>
	*{margin:0;padding:0;}
	.main{margin:0 auto;position:relative;}
	.pic{float:left;}
	.box{padding:15px;border:2px solid #ccc;border-radius:50%;box-shadow:0 2 0 2 1 1 #ccc;margin:15px; }
	.pic img{width:150px;height:auto;}
</style>
<body>
	<div class="main">
	<div class="box">
		<div class="pic">
			<img src="images/0.jpg"/>
		</div>
	</div>
	<div class="box">
		<div class="pic">
			<img src="images/1.jpg"/>
		</div>
	</div>
	<div class="box">
		<div class="pic">
			<img src="images/2.jpg"/>
		</div>
	</div>
	<div class="box">
		<div class="pic">
			<img src="images/3.jpg"/>
		</div>
	</div>
	<div class="box">
		<div class="pic">
			<img src="images/4.jpg"/>
		</div>
	</div>
	<div class="box">
		<div class="pic">
			<img src="images/5.jpg"/>
		</div>
	</div>
	<div class="box">
		<div class="pic">
			<img src="images/6.jpg"/>
		</div>
	</div>
	<div class="box">
		<div class="pic">
			<img src="images/7.jpg"/>
		</div>
	</div>
	<div class="box">
		<div class="pic">
			<img src="images/8.jpg"/>
		</div>
	</div>
	<div class="box">
		<div class="pic">
			<img src="images/9.jpg"/>
		</div>
	</div>
	<div class="box">
		<div class="pic">
			<img src="images/10.jpg"/>
		</div>
	</div>
</div>
</body>
<script>
	window.onload=function(){
		waterfall();
		var obj={
			arr:['0.jpg','1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg','7.jpg','8.jpg','9.jpg','10.jpg']

		};
		if(scrollTop()){
		$(window).scorll=function(){
		$.each(obj.arr,function(idx,value){
			var box=$("<div class='box'></div>");
		var pic=$("<div class='pic'></div>");
		var img=$("<img src='images/"+obj.arr[idx]+"'/>");
		$(".main").append("box");
		box.append("pic");
		pic.append("img");

	})
	waterfall();
	}	
}
	function scrollTop(){
		var last=$(".box").last();
		var lastH=last.outerHeight()/2;
		var offsetTop=last.offset().top;
		if(lastH+offsetTop<$(window).height()+$(document).scrollTop()){
		return true;
	}else{
		return false;
	}
}
}
	function waterfall(){
		var width=$(window).width();
		var num=Math.floor(width/($(".box").first().outerWidth()));
		$(".main").width(num*$(".box").first().outerWidth());
		var hrr=[];
		for(var i=0;i<$(".box").length;i++){
			if(i<num){
				hrr.push($(".box").eq(i).outerHeight());
				var minHeight=Math.min.apply(null,hrr);
				var idx=$.inArray(minHeight,hrr);
		}else{
			$(".box").eq(i).css({position:"absolute",left:"idx*$('.box').first().outerWidth()",top:"minHeight"});
			hrr[idx]=hrr[idx]+$(".box").eq(i).outerHeight();//把这些下标的高累加起来
		}
	}
}
</script>