html+jQuery实现照片墙

最新推荐文章于 2024-07-27 23:01:21 发布

Lowky

最新推荐文章于 2024-07-27 23:01:21 发布

阅读量1.4k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/xeay123/article/details/45033455

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前提准备，有批量的照片。最好是有共同的前缀，这样有利于jQuery的批处理。

推荐七牛云或者是又拍云，他们可以提供图片的各种处理。直接上代码。

有点类似于瀑布流，用div来布局，划分三个区域。利用JS来动态添加照片

文件也上传到了新浪云，可以戳下列地址看一下：

照片墙

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <link rel="stylesheet" type="text/css" href="style.css">
 <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
 <style type="text/css">
	body{
		height:700px;
		background-image:url('http://7sbpxj.com1.z0.glb.clouddn.com/bg.jpg');
	}
	img{
		border-radius:5px;
		margin:5px;
		position:relative;
		width:250px;
		height:auto;
		border:1px solid darkgray;
		box-shadow:3px 3px 2px darkgray;
	}
	div.divdown{
		float:left;
		position:relative;
		width:255px;
		height:50%;
		margin:5px;
	}
	div.divContainer{
		padding:20px;
		width:800px;
		height:2000px;
		margin-top:20px;
		margin-left:auto;
		margin-right:auto;
		border:1px solid darkgray;
		border-radius:10px;
		box-shadow:3px 3px 2px darkgray;
	}

 </style>
</head>
<body>
	<div class="divContainer" id="imgbox" >
		<div class="divdown" id="first">
		</div>
		<div class="divdown" id="second">
		</div>	
		<div class="divdown" id="three">
		</div>
	</div>
</body>
	<script>
		$(function(){	
			var divdown = new Array("#first","#second","#three");
			var qbox = "http://7sbpxj.com1.z0.glb.clouddn.com/mtxx";//七牛云存储
			var i=1;
			var Circle;
			function out(){
				if(i==23){	
					window.clearInterval(Circle); //已经达到图片上限。关掉定时器
				}
				src = qbox + i + ".jpg";//这里可以添加自己的照片。注意图片要处理等比例宽250的
				var newimg = $("<img>").attr('src',src); //创建IMG元素		
				$(divdown[i%3]).append(newimg); //依次排序过去1，2，3
				newimg.fadeTo(50,0);
				newimg.fadeTo(950,1);//渐入逐出效果
				i++;		
			}
			Circle = setInterval(out,1000);			
		});
	</script>
</html>