您的位置：首页 > Web前端 > JQuery

html+jQuery实现照片墙

2015-04-13 22:31 176 查看

前提准备，有批量的照片。最好是有共同的前缀，这样有利于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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航