基于Web的浮动图片墙

个人博客：http://www.chenjianqu.com/

原文链接：http://www.chenjianqu.com/show-33.html

直接上效果图：

Html设计

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><script type="text/javascript" src="jquery-1.8.3.min.js"></script><script type="text/javascript" src="main.js"></script><title>我的图片墙</title><link type="text/css" rel="stylesheet" href="style_main.css" />
</head>
<body>
<div class="bar"><button id="menu" type="button">切换模式</button><button class="close" type="button">close</button>
</div>
<div id="main"><br id="pidAddTag"/>
</div>
</body>
</html>

CSS设计

*{//通过通配符 去掉所有元素的边框margin:0;padding: 0;
}
#main{position:absolute;top:0;
}
.bar{margin: 0 auto;text-align: center;
}
#menu{positon:fixed;z-index:999;top:0;
}
.close{positon:absolute;right: 0;top:0
}
.box{padding:5px 5px 5px 5px;//顶部 右边 下边 左边的边距
}
.pic{padding:10px;border:1px solid #ccc;border-radius: 5px;box-shadow: 0 0 5px #ccc;
}
.pic image{width:100px;height: auto;
}

从上面的HTML和CSS可以知道，此时的页面中还没有放入图片，所以JS的代码的第一部分是加入往网页中写入图片：

//添加图片
function AddPic() {var addStr="";for(var i=1;i<=120;i++){addStr+='<div class=\"box\" >\n' +'<div class=\"pic\">\n' +'<img src=\"./pic1/pic ('+i+').jpg\"/>\n' +'</div>\n' +'</div>\n'}$("#pidAddTag").after(addStr);
}

然后要实现瀑布流界面：

实现瀑布流的思路很简单，首先要设置所有图片的宽度一致，然后首先排列好第一列。在第一列的基础上，按照最小宽度的原则，依次插入图片，最后就可以得到如上图所示的瀑布流效果了。代码实现如下：

//以瀑布流的方式排布图片
function waterfall() {clearInterval(tick);StopAllPicAnimate();currentPoint=1;var w=100;var hArr=[];$(".box").css({"position":"absolute",
//        "float":"left",});$(".pic").css({"width":"auto","height":"auto",});$(".pic").children().css({"width":w,"height":"auto",});var $boxs=$("#main").children();var cols=Math.floor($(window).width()/(w+20));//得到列数$('#main').width((w+20)*cols).css('margin','0 auto');//设置main div的宽度 同时让它居中picObjArr.each(function (index,value) {//遍历boxs,两个参数:元素索引和值var h = $boxs.eq(index).outerHeight();//包括padding的高度if (index < cols) {$(value).css({"position":"absolute","top":50,"left":index*(w+20)});hArr[index] = h+50;wallfallPosArr[index] = {left: index*(w+20), top: 50};}});picObjArr.each(function (index,value) {if(index>=cols) {var h = $boxs.eq(index).outerHeight();var minH = Math.min.apply(null, hArr);//找到hArr中的最小值var minH_Index = $.inArray(minH, hArr);//找到minH在数组中的索引$(value).css({"position": "absolute","top": minH,"left": minH_Index * (w + 20)});wallfallPosArr[index] = {left: minH_Index * (w+20), top: minH};hArr[minH_Index] += $boxs.eq(index).outerHeight();//更新高度数组里面的值}});
}

接下来实现Y型排列：

这个实现还是很简单的，遍历每一张图片，然后递增设置Margin就可以了。代码如下：

function centerMode()
{
//初始化属性$(".box").css({"position":"absolute","float":null,});$(".pic").children().css({"width":100,"height":"auto",});//设置中心图片的位置var len=picObjArr.length;picObjArr.each(function (index,value) {//获得所有图片的位置posArray[index].width=$(this).children().outerWidth();posArray[index].height=$(this).children().outerHeight();if(index<len/2) {posArray[index].left = index * 10;posArray[index].top = index * 10;}else{posArray[index].left = $(window).width()-(index-len/2) * 25;posArray[index].top = (index-len/2) * 18;}//设置默认的中心图片if(index==currentPoint) {centerPicObj=$(this);centerPicPos.w=400;centerPicPos.h=$(this).height()/$(this).width()*400;centerPicPos.left=$(window).width()/2-centerPicPos.w/2;centerPicPos.top=300;$(this).css({"left":centerPicPos.left,"top":centerPicPos.top,});$(this).children().width("auto");$(this).children().children().css({"width":centerPicPos.w,"height":centerPicPos.h,});}});//设置图片游动定时器tick=setInterval(PicFloat, 500);
}

然后是实现心形排列：

心形曲线的极坐标方程请自行百度，下面直接给出代码。

function ShowWXY() {StopAllPicAnimate();//清除动画队列//初始化属性$(".box").css({"position":"absolute","float":null,});$(".pic").children().css({"width":100,"height":"auto",});currentPoint=-1;//设置中心图片的位置var len=picObjArr.length;picObjArr.each(function (index,value) {//获得所有图片的位置posArray[index].width = $(this).children().outerWidth();posArray[index].height = $(this).children().outerHeight();if (index < len / 2) {posArray[index].left = index * 10;posArray[index].top = index * 10;} else {posArray[index].left = $(window).width() - (index - len / 2) * 25;posArray[index].top = (index - len / 2) * 18;}});var dx=10,dy=10;var r=200;var last_t=-1;var m, n, x, y, i,t;for (i = 0; i <= 200; i += 0.04) {m = i;n=-r*(((Math.sin(i)*Math.sqrt(Math.abs(Math.cos(i))))/(Math.sin(i)+1.4))-2*Math.sin(i)+2);x = n * Math.cos(m) + $(window).width()/2;y = n * Math.sin(m) + 200;t=Math.floor(i%posArray.length);if(t!=last_t) {//console.log(t);posArray[t].left = x;posArray[t].top = y;}last_t=t;}
}

加下来是编写浮动的代码。若想要图片产生浮动的效果，只需要设置一个定时器，每隔一段时间图片x和y方向上偏移一段距离即可。

首先对每个图片的x和y方向设置一个偏移量随机数。

//初始化图片位置数组
for(var i=0;i<numPic;i++)posArray[i]={left:0,top:0,width:100,height:100,randomLeft:Math.round(Math.random()*delta-delta/2),randomTop:Math.round(Math.random()*delta-delta/2)};

然后设置定时器事件，并限制图片浮动的范围。

//设置图片游动定时器
tick=setInterval(PicFloat, 500);
function PicFloat() {
var cl=centerPicPos.left,ct=centerPicPos.top,cw=centerPicPos.w,ch=centerPicPos.h;
var cr=cl+cw,cb=ct+ch;
//限制图片的游走区域
for(var i=0;i<numPic;i++)
{
var pl=posArray[i].left,pt=posArray[i].top,pw=posArray[i].width,ph=posArray[i].height;
var pr=pl+pw,pb=pt+ph;
//图片不能超过四个边界
if(pl<0)
posArray[i].randomLeft=Math.abs(posArray[i].randomLeft);
else if(pr>$(window).width())
posArray[i].randomLeft=-Math.abs(posArray[i].randomLeft);
if(pt<0)
posArray[i].randomTop=Math.abs(posArray[i].randomTop);
else if(pb>aeraHeight )
posArray[i].randomTop=-Math.abs(posArray[i].randomTop);
//图片不能盖住中心图片
if(pb>ct && pt<cb &&pr>cl &&pl<cl)
posArray[i].randomLeft = -posArray[i].randomLeft;
if(pb>ct && pt<cb &&(pl<cr &&pr>cr))
posArray[i].randomLeft = -posArray[i].randomLeft;
if(pb>ct && pt<ct &&(pl<cr &&pr>cl))
posArray[i].randomTop = -posArray[i].randomTop;
if(pb>cb && pt<cb &&(pl<cr &&pr>cl))
posArray[i].randomTop = -posArray[i].randomTop;
if(pb<cb && pt>ct &&pl>cl &&pr<cr) {
posArray[i].randomTop = -posArray[i].randomTop;
posArray[i].randomLeft = -posArray[i].randomLeft;
}
posArray[i].top+=posArray[i].randomTop;
posArray[i].left+=posArray[i].randomLeft;
}
//图片浮动
picObjArr.each(function (index,value) {
if(currentPoint!=index) {
var p = posArray[index];
$(this).animate({
left: p.left,
top: p.top,
});
}
});
}

最后就是编写图片的打开和关闭。

这部分的代码原理上很简单的，但是由于是要考虑各种情况，所以反而是编写最麻烦的一段。

//点击关闭按钮
$closeBtn.click(function () {isShowFullPic=false;if(mode==1) {centerPicObj.css({"left": wallfallPosArr[currentPoint].left,"top": wallfallPosArr[currentPoint].top,"z-index":1,});centerPicObj.children().children().css({"width": 100,"height": "auto",});}else if(mode==2) {centerPicObj.css({"left": posArray[currentPoint].left,"top": posArray[currentPoint].top,"z-index":1,});centerPicObj.children().children().css({"width": 100,"height": "auto",});}else if(mode==3) {if(currentPoint==-1)currentPoint=1;centerPicObj.css({"left": posArray[currentPoint].left,"top": posArray[currentPoint].top,"z-index":1,});centerPicObj.children().children().css({"width": 100,"height": "auto",});}centerPicPos.w=0centerPicPos.h=0;centerPicPos.left=0;centerPicPos.top=0;$closeBtn.hide();
});

//设置图片的点击事件
picObjArr.each(function (index,value) {
$(this).click(function () {
StopAllPicAnimate();//清除动画队列
isShowFullPic=true;
$closeBtn.show();
//重置中心图片的大小和位置
if(mode==1) {
centerPicObj.css({
"left": wallfallPosArr[currentPoint].left,
"top": wallfallPosArr[currentPoint].top,
"z-index":1,
});
centerPicObj.children().children().css({
"width": 100,
"height": "auto",
});
}
else if(mode==2)
{
clearInterval(tick);
centerPicObj.css({
"left": posArray[currentPoint].left,
"top": posArray[currentPoint].top,
"z-index":1,
});
centerPicObj.children().children().css({
"width": 100,
"height": "auto",
});
}
else if(mode==3)
{
if(currentPoint==-1)
currentPoint=1;
clearInterval(tick);
centerPicObj.css({
"left": posArray[currentPoint].left,
"top": posArray[currentPoint].top,
"z-index":1,
});
centerPicObj.children().children().css({
"width": 100,
"height": "auto",
});
count++;
if(count==4)say();
}
ResetSomePic();
currentPoint=index;
centerPicObj=$(this);
centerPicObjPos={"left":$(this).left}
centerPicPos.w=800;
centerPicPos.h=$(this).height()/$(this).width()*800;
centerPicPos.left=$(window).width()/2-centerPicPos.w/2;
centerPicPos.top=300;
$(this).css({
"left":centerPicPos.left,
"top":centerPicPos.top,
"z-index":10.
});
$(this).children().css({
"width":"auto",
});
$(this).children().children().css({
"width":centerPicPos.w,
"height":centerPicPos.h,
});
if(mode==2||mode==3)
{
tick=setInterval(PicFloat, 100);
}
});
})

完整的项目代码请看我的github: https://github.com/chenjianqu/FloatingPictureWall

基于Web的浮动图片墙相关推荐

html 图片墙效果,基于html5实现的图片墙效果
温馨提示:本信息由[金聪采编]搜集整理发布,版权归原作者及发布者所有,您如有异议请举报或者版权申诉. 本文实例讲述了基于html5实现的图片墙效果,分享给大家供大家参考.具体实现方法如下: 这里 ...
html自动图片墙,基于html5实现的图片墙效果
代码如下: 表格界面 ul{list-style:none;} {{title}} var app=angular.module("app",[], function () { c ...
lamp管理 centos_基于web图片素材管理搭建
基于web图片素材管理搭建简介Eagle的问题:BillFish的问题个人的需求部署宝塔面板安装安装Piwigo相册操作- 虚拟相册 :- 实体相册:操作部分其他应用简介为什么选择这个基于web ...
使用jQuery开发一个基于HTML5的漂亮图片拖拽上传web应用
昨天我们介绍了一款HTML5文件上传的jQuery插件:jQuery HTML5 uploader,今天我们将开发一个简单的叫upload center的图片上传程序,允许用户使用拖拽方式来上传电脑上 ...
java图片管理系统_基于Java Web技术的图片管理系统的设计与实现.doc
基于Java Web技术的图片管理系统的设计与实现本科毕业设计目录第1章引言6 1.1 课题研究目的及意义6 1.2 课题研究的内容7 2.1 用户功能需求7 图片收藏数据库查询系统图片收 ...
【React 】基于Antd Design的Upload图片墙组件封装
最近在统一UI组件库,基于项目的需求,封装了一个专门用来上传图片的控件,主要有以下一些功能: a. 可以动态配置保存的方式,可以上传到文档库.Redis缓存以及base64保存在数据库中: b. 动态 ...
基于Web日志挖掘的个性化推荐系统（附源码）
个性化推荐系统实现该系统主要是使用的编程语言主要是R,然后配合css在样式上进行一定优化,使用shiny开发的一款web程序,主要实现的核心功能是基于spark的ALS算法的课程个性化推荐系统.首页 ...
计算机毕业设计ssm基于WEB的儿童运动馆业务信息系统
最新计算机专业原创毕业设计参考选题都有源码+数据库是近期作品你的选题刚好在下面有,有时间看到机会给您发 1 ssm基于vue架构的云餐厅美食订餐系统 2 ssm大学生自我管理系统 3 ssm海城同泽 ...
计算机虚拟网络毕业论文,计算机毕业论文——基于WEB的虚拟计算机网络实验平台.doc...
PAGE Tianjin University of Technology and Education 毕业设计专业: 计算机科学与技术班级学号: 计0203班 – 11 学生姓名: 指导 ...

基于Web的浮动图片墙

基于Web的浮动图片墙相关推荐

最新文章

热门文章