js实现照片墙功能实例
本文实例讲述了js实现照片墙功能的方法。分享给大家供大家参考。具体实现方法如下：
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>js照片墙</title>
<meta http-equiv="X-UA-Compatible" content="edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Keywords" content="js照片墙">
<meta name="description" content="js照片墙">
<link href="css/style.css" rel="stylesheet">
<script src="move.js"></script>
<style>
*{padding: 0; margin: 0;}
li{list-style: none;}
ul{width: 660px; height:510px; background:#ccc;margin: 20px auto;}
li{width:200px; height: 150px; margin: 10px; float: left; }
</style>
<script>
/*
var arr=['a','b','c','d','e','d','f'];
var pos = arr.lastIndexOf('d');
alert(pos);
*/
window.onload=function(){
var aLi = document.querySelectorAll('li');
var oInput = document.querySelector('#btn');
var pos = [];
var len= aLi.length;
var izIndex= 2;
//布局转换
for(var i=0;i<len;i++){
pos.push([aLi[i].offsetLeft,aLi[i].offsetTop]);
}
for(var i=0;i<len;i++){
aLi[i].style.left=pos[i][0]+'px';
aLi[i].style.top=pos[i][1]+'px';
aLi[i].style.position = 'absolute';
aLi[i].style.margin = '0px';
}
for(var i=0;i<len;i++){
aLi[i].index = i;
setDrag(aLi[i]);
}
oInput.onclick=function(){
var randomArr = [0,1,2,3,4,5,6,7,8];
randomArr.sort(function(num1,num2){
return Math.random()-0.5;
})
for(var i=0;i<len;i++){
//增加随机位置的情况
startMove(aLi[i],{left:pos[randomArr[i]][0],top:pos[randomArr[i]][1]});
//修正索引
aLi[i].index = randomArr[i];
}
}
//拖拽
function setDrag(obj){
obj.onmousedown =function(ev){
izIndex++;
obj.style.zIndex= izIndex;
var ev = ev || event;
var disX = ev.clientX - obj.offsetLeft;
var disY = ev.clientY - obj.offsetTop;
document.onmousemove=function(ev){
var ev = ev || event;
obj.style.left = ev.clientX- disX +'px';
obj.style.top = ev.clientY - disY +'px';
for(var i=0; i<len; i++){
aLi[i].style.border='none';
}
var nL = nearLi(obj);
if(nL){
nL.style.border='2px solid red';
}
}
document.onmouseup= function(){
document.onmousemove = null;
document.onmouseup = null;
var nL = nearLi(obj);
if(nL){
nL.style.border='2px solid red';
startMove(obj,{left:pos[nL.index][0],top:pos[nL.index][1]});
startMove(nL,{left:pos[obj.index][0],top:pos[obj.index][1]});
var tmp =nL.index;
nL.index = obj.index;
obj.index = tmp;
nL.style.border='';
}else{
startMove(obj,{left:pos[obj.index][0],top:pos[obj.index][1]});
}
}
return false;
}
}
//检测是否有碰撞
function isDump(obj1,obj2){
var l1= obj1.offsetLeft;
var r1= l1+obj1.offsetWidth;
var t1= obj1.offsetTop;
var b1 =obj1.offsetHeight +t1;
var l2= obj2.offsetLeft;
var r2= l2+obj2.offsetWidth;
var t2= obj2.offsetTop;
var b2 =obj2.offsetHeight +t2;
if(b2<t1 || l2>r1 || r2<l1 || t2>b1){
return false;
}else{
return true;
}
}
//寻找最近的节点
function nearLi(obj){
var index= -1;
var value =9999;
for(var i=0; i<len; i++){
if(isDump(obj,aLi[i]) && obj !=aLi[i]){
var c = getDis(obj,aLi[i]);
if(c <value){
value = c;
index = i;
}
}
}
if(index !=-1){
return aLi[index];
}else{
return false;
}
}
function getDis(obj1,obj2){
var x = obj1.offsetLeft - obj2.offsetLeft;
var y = obj1.offsetTop - obj2.offsetTop;
return Math.sqrt(Math.pow(x,2)+Math.pow(y,2));
}
}
</script>
</head>
<body>
<button id="btn">click</button>
<ul>
<li><img src="1l.jpg" width="200px" height="150px"></li>
<li><img src="2l.jpg" width="200px" height="150px"></li>
<li><img src="3l.jpg" width="200px" height="150px"></li>
<li><img src="4l.jpg" width="200px" height="150px"></li>
<li><img src="5l.jpg" width="200px" height="150px"></li>
<li><img src="6l.jpg" width="200px" height="150px"></li>
<li><img src="1l.jpg" width="200px" height="150px"></li>
<li><img src="2l.jpg" width="200px" height="150px"></li>
<li><img src="4l.jpg" width="200px" height="150px"></li>
</ul>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
相关推荐
-
Android瀑布流照片墙实现 体验不规则排列的美感
传统界面的布局方式总是行列分明.坐落有序的,这种布局已是司空见惯,在不知不觉中大家都已经对它产生了审美疲劳.这个时候瀑布流布局的出现,就给人带来了耳目一新的感觉,这种布局虽然看上去貌似毫无规律,但是却有一种说不上来的美感,以至于涌现出了大批的网站和应用纷纷使用这种新颖的布局来设计界面. 记得我在之前已经写过一篇关于如何在Android上实现照片墙功能的文章了,但那个时候是使用的GridView来进行布局的,这种布局方式只适用于"墙"上的每张图片大小都相同的情况,如果图片的大小参差不齐,
-
基于jQuery实现照片墙自动播放特效
一个动态展示图片的页面: 功能:定时从后台取数据,进行页面图片追加.对已经在页面中的图片,进行放大缩小动画展示.目前我们用于微信新关注用户头像展示. <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1
-
js实现超酷的照片墙展示效果图附源码下载
这是一个超酷的照片墙展示效果,很多照片结合淡入淡出.旋转.缩放.倾斜及3D效果,照片快速从左侧切入,做旋转3D效果,最后在照片墙上整齐排列,为用户展示了超酷的照片墙展示效果. 查看演示 下载源码 HTML 本文结合实例给大家分享超酷的照片墙效果,该效果依赖jQuery和easing插件,因此首先载入这两个文件. <script src="jquery.min.js"></script> <script src="jquery.easing.1.3
-
javascript实现了照片拖拽点击置顶的照片墙代码
演示图 styles.css *{ /*清空所有元素默认的外边距和内边距*/ } .photo_wall{ background:url(bg.jpg); /*定义照片墙的默认背景*/ background-size:cover; /*使照片墙的背景填充照片墙*/ width:1200px; /*设置照片墙的宽高*/ height:500px; margin:40px auto; /*设置照片墙的外边距*/ display:-webkit-box; /*使用CSS3的盒模型之流式布局*/ dis
-
Android照片墙应用实现 再多的图片也不怕崩溃
照片墙这种功能现在应该算是挺常见了,在很多应用中你都可以经常看到照片墙的身影.它的设计思路其实也非常简单,用一个GridView控件当作"墙",然后随着GridView的滚动将一张张照片贴在"墙"上,这些照片可以是手机本地中存储的,也可以是从网上下载的.制作类似于这种的功能的应用,有一个非常重要的问题需要考虑,就是图片资源何时应该释放.因为随着GridView的滚动,加载的图片可能会越来越多,如果没有一种合理的机制对图片进行释放,那么当图片达到一定上限时,程序就必然
-
javascript制作照片墙及制作过程中出现的问题
本文主要做了一个照片墙,整个制作过程,主要需要解决一下几个问题: 1.如何进行布局转换? 2.如何对图片进行拖拽处理? 3.如何检测图片碰撞问题?进行碰撞检测 4.当多个图片进行碰撞,如何取其中距离对象最小的物体? 5.如何将相互碰撞的两个物体的位置相互交换?涉及到运动的类库 代码如下: <html> <head> <style> body{background:black;margin: 0;padding: 0;color: white;font-size: 50p
-
js实现照片墙功能实例
本文实例讲述了js实现照片墙功能的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8">
-
用原生 JS 实现 innerHTML 功能实例详解
都知道浏览器和服务端是通过 HTTP 协议进行数据传输的,而 HTTP 协议又是纯文本协议,那么浏览器在得到服务端传输过来的 HTML 字符串,是如何解析成真实的 DOM 元素的呢,也就是我们常说的生成 DOM Tree,最近了解到状态机这样一个概念,于是就萌生一个想法,实现一个 innerHTML 功能的函数,也算是小小的实践一下. 函数原型 我们实现一个如下的函数,参数是 DOM 元素和 HTML 字符串,将 HTML 字符串转换成真实的 DOM 元素且 append 在参数一传入的 DOM
-
JS验证字符串功能
js 验证字符串功能实例代码如下所示: //去除空格 function jsTrim(value) { var reg = /^\S$/; if (!value) return ""; if (value.length == 0) return value; else { var lp, rp; lp = 0; rp = value.length - 1; while ((value.charAt(lp) == " " || (value.charCodeAt(lp
-
基于JS实现checkbox全选功能实例代码
需求:要求实现点击全选选中所有菜单,再次点击全选取消选中.此功能经常会用户,下面小编给大家分享下实现代码,一起看看吧! 效果图如下: 点击全选之前: 点击全选之后: 再次点击全选之后: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> &l
-
JS图片轮播与索引变色功能实例详解
废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <met
-
JS实现星星评分功能实例代码(两种方法)
一.方法1 1.用到图片 2.结构和样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> ul { padding-left: 0; overflow: hidden; } ul li { float: left; list-style: no
-
js + css实现标签内容切换功能(实例讲解)
先附上效果图和代码: html 文档: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../js/tabs_function.js"></scri
-
js实现ArrayList功能附实例代码
1.ArrayList方法摘要 构造方法摘要 ArrayList() 构造一个初始容量为 10 的空列表. ArrayList(Collection<? extends E> c) 构造一个包含指定 collection 的元素的列表,这些元素是按照该 collection 的迭代器返回它们的顺序排列的. ArrayList(int initialCapacity) 构造一个具有指定初始容量的空列表. 方法摘要 boolean add(E e) 将指定的元素添加到此列表的尾部. void ad
-
JS实现百度搜索接口及链接功能实例代码
本文通过代码给大家介绍js实现百度搜索接口及链接功能,具体代码如下所示: 在上篇文章给大家介绍了JS 实现百度搜索功能 <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>anchor</title> <style> *{ margin:0; padding:0; } #wei{ wid
-
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
本文实例讲述了JS秒杀倒计时功能.分享给大家供大家参考,具体如下: 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body onload="miaosha();"> <p class="tit_right" style="