<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>照片墙一多实例演示</title>

<style type="text/css">

body,div,h2,ul,li{margin:0;padding:0;}

body{font:12px/1.5 Arail;}

.box{width:860px;margin:10px auto;background:#eee;border:1px solid #b8b8b8;overflow:hidden}

.title{height:30px;line-height:30px;font-size:14px;padding:0 15px 0 35px;border-bottom:1px solid #b8b8b8;background:#fafafa url(http://js.alixixi.com/img/mm/ico.gif) 5px 50% no-repeat;}

.title span{float:left;}

.title a{float:right;color:#06f;outline:none;}

.title a:hover{color:red;}

.box ul{float:left;padding:0 15px 15px 0;}

.box li{float:left;width:140px;height:105px;padding:6px;background:#fff;border:1px solid #c3c3c3;display:inline;margin:15px 0 0 15px;list-style:none;}

.box li img{float:left;width:140px;height:105px;}

.box li.hig{padding:5px;border:2px dashed #f30;opacity:0.5;filter:alpha(opacity=50);}

</style>

<script type="text/javascript">

//获取ID

var $ = function (id) {return typeof id === "string" ? document.getElementById(id) : id};

//获取tagName

var $$ = function (tagName, oParent) {return (oParent || document).getElementsByTagName(tagName)};

//获取class

var $$$ = function (sClass, oParent) {

 var aClass = [],

 i = 0,

 reClass = new RegExp("(\\s|^)" + sClass + "($|\\s)"),

 aElement = $$("*", oParent);

 for (i = 0; i < aElement.length; i++)reClass.test(aElement[i].className) && aClass.push(aElement[i]);

 return aClass

};

//获取元素位置

function getPos(obj) {

 var iTop = obj.offsetTop;

 var iLeft = obj.offsetLeft;

 while (obj.offsetParent)

 {

  iTop += obj.offsetParent.offsetTop;

  iLeft += obj.offsetParent.offsetLeft;

  obj = obj.offsetParent;

 }

 return {top:iTop, left:iLeft}

};

//创建照片墙对象

var PhotoWall = function () {this.initialize.apply(this, arguments)};

PhotoWall.prototype = {

 initialize: function (obj, aData)

 {

  var oThis = this;

  this.oParent = $(obj);

  this.oUl = $$("ul", this.oParent)[0];

  this.oBtn = $$("a", this.oParent)[0];

  this.zIndex = 1;

  this.aPos = [];

  this.aData = aData;

  this.dom = document.documentElement || document.body;

  this.create();

  this.oBtn.onclick = function () {oThis.randomOrder()}

 },

 create: function ()

 {

  var aFrag = document.createDocumentFragment();

  var i = 0;

  for (i = 0; i < this.aData.length; i++)

  {

   var oLi = document.createElement("li");

   var oImg = document.createElement("img");

   oImg.src = this.aData[i];

   oLi.appendChild(oImg);

   aFrag.appendChild(oLi)

  }

  this.oUl.appendChild(aFrag);

  this.aLi = $$("li", this.oParent);

  this.changeLayout()

 },

 changeLayout: function ()

 {

  var i = 0;

  this.oParent.style.height = this.oParent.offsetHeight - 2 + "px";

  this.aPos.length = 0;

  for (i = 0; i < this.aLi.length; i++) this.aLi[i].style.cssText = "";

  for (i = 0; i < this.aLi.length; i++)

  {

   this.aLi[i].index = i;

   this.aLi[i].style.top = getPos(this.aLi[i]).top + "px";

   this.aLi[i].style.left = getPos(this.aLi[i]).left + "px";

   this.aPos.push({left:getPos(this.aLi[i]).left, top:getPos(this.aLi[i]).top})

  }

  for (i = 0; i < this.aLi.length; i++)

  {

   this.aLi[i].style.position = "absolute";

   this.aLi[i].style.margin = "0";

   this.drag(this.aLi[i])

  }

 },

 drag: function (obj, handle)

 {

  var oThis = this;

  var handle = handle || obj;

  handle.style.cursor = "move";

  handle.onmousedown = function (event)

  {

   var event = event || window.event;

   var disX = event.clientX - this.offsetLeft;

   var disY = event.clientY - this.offsetTop;

   var oNear = null;

   handle.style.zIndex = oThis.zIndex++;

   document.onmousemove = function (event)

   {

    var event = event || window.event;

    var iL = event.clientX - disX;

    var iT = event.clientY - disY;

    var maxL = Math.max(oThis.dom.clientWidth, oThis.dom.scrollWidth) - handle.offsetWidth;

    var maxT = Math.max(oThis.dom.clientHeight, oThis.dom.scrollHeight) - handle.offsetHeight;

    iL < 0 && (iL = 0);

    iT < 0 && (iT = 0);

    iL > maxL && (iL = maxL);

    iT > maxT && (iT = maxT);

    handle.style.left = iL + "px";

    handle.style.top = iT + "px";

    oNear = oThis.findNearest(obj);

    for (var i = 0; i < oThis.aLi.length; i++) oThis.aLi[i].className = "";

    oNear && (oNear.className = "hig");

    return false

   };

   document.onmouseup = function ()

   {

    document.onmousemove = null;

    document.onmouseup = null;

    if (oNear)

    {

     handle.index = [handle.index, oNear.index];

     oNear.index = handle.index[0];

     handle.index = handle.index[1];

     oNear.style.zIndex = oThis.zIndex++;

     oThis.doMove(handle, oThis.aPos[handle.index]);

     oThis.doMove(oNear, oThis.aPos[oNear.index]);

     oNear.className = "";

    }

    else

    {

     oThis.doMove(handle, oThis.aPos[handle.index])

    }

    handle.releaseCapture && handle.releaseCapture()

   };

   this.setCapture && this.setCapture();

   return false

  };

 },

 doMove: function (obj, iTarget, callback)

 {

  var oThis = this;

  clearInterval(obj.timer);

  obj.timer = setInterval(function ()

  {

   var iCurL = getPos(obj).left;

   var iCurT = getPos(obj).top;

   var iSpeedL = (iTarget.left - iCurL) / 5;

   var iSpeedT = (iTarget.top - iCurT) / 5;

   iSpeedL = iSpeedL > 0 ? Math.ceil(iSpeedL) : Math.floor(iSpeedL);

   iSpeedT = iSpeedT > 0 ? Math.ceil(iSpeedT) : Math.floor(iSpeedT);

   if (iCurL == iTarget.left && iCurT == iTarget.top)

   {

    clearInterval(obj.timer);

    callback && callback()

   }

   else

   {

    obj.style.left = iCurL + iSpeedL + "px";

    obj.style.top = iCurT + iSpeedT + "px"

   }

  }, 30)

 },

 findNearest: function (obj)

 {

  var aDistance = [];

  var i = 0;

  for (i = 0; i < this.aLi.length; i++) aDistance[i] = this.aLi[i] == obj ? Number.MAX_VALUE : this.getDistance(obj, this.aLi[i]);

  var minNum = Number.MAX_VALUE;

  var minIndex = -1;

  for (i = 0; i < aDistance.length; i++) aDistance[i] < minNum && (minNum = aDistance[i], minIndex = i);

  return this.isButt(obj, this.aLi[minIndex]) ? this.aLi[minIndex] : null

 },

 getDistance: function(obj1, obj2)

 {

  var a = (obj1.offsetLeft + obj1.offsetWidth / 2) - (obj2.offsetLeft + obj2.offsetWidth / 2);

  var b = (obj1.offsetTop + obj1.offsetTop / 2) - (obj2.offsetTop + obj2.offsetTop / 2);

  return Math.sqrt(a * a + b * b)

 },

 isButt: function (obj1, obj2)

 {

  var l1 = obj1.offsetLeft;

  var t1 = obj1.offsetTop;

  var r1 = l1 + obj1.offsetWidth;

  var b1 = t1 + obj1.offsetHeight;

  var l2 = obj2.offsetLeft;

  var t2 = obj2.offsetTop;

  var r2 = l2 + obj2.offsetWidth;

  var b2 = t2 + obj2.offsetHeight;

  return !(r1 < l2 || b1 < t2 || r2 < l1 || b2 < t1)

 },

 randomOrder: function ()

 {

  this.aPos.sort(function () {return Math.random() > 0.5 ? 1 : -1});

  for (var i = 0; i < this.aLi.length; i++)

  {

   this.aLi[i].index = i;

   this.doMove(this.aLi[i], this.aPos[i])

  }

 }

};

window.onload = function ()

{

 var aBox = $$$("box");

 var aData = [];

 var aExample = [];

 var i = 0;

 //生成图片数据

 for (i = 0; i < 20; i++) aData[aData.length] = "http://js.alixixi.com/img/mm/" + i + ".jpg";

 //循环创建多个实例

 for (i = 0; i < aBox.length; i++)

 {

  var oExample = new PhotoWall(aBox[i], aData);

  aExample.push(oExample)

 }

 this.onresize = function ()

 {

  for (var p in aExample) aExample[p].changeLayout()

 };

 this.onresize()

};

</script>

</head>

<body>

<div class="box">

    <h2 class="title"><span>一堆90后</span><a href="javascript:;" class="order">随机排序</a></h2>

    <ul></ul>

</div>

<div class="box">

    <h2 class="title"><span>一堆90后</span><a href="javascript:;" class="order">随机排序</a></h2>

    <ul></ul>

</div>

</body>

</html>

效果：

原生JS编写的照片墙效果实例演示特效的更多相关文章

  1. 关于错位动画的练习，原生js编写

    最近在网上看到一个关于错位动画的文章,感觉非常有趣,便自己练习了一下,文章连接:http://www.w3cplus.com/animation/staggering-animations.html ...

  2. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  3. 面向对象原生js幻灯片代淡出效果

    面向对象原生js幻灯片代淡出效果 下面是代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  4. 原生js实现的放大镜效果

    这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html&g ...

  5. jq与原生js实现收起展开效果

    jq与原生js实现收起展开效果 (jq需自己加载) <!DOCTYPE html> <html> <head> <meta charset="UTF ...

  6. 原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)

    淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...

  7. 原生js编写的安全色拾色器

    <html > <head> <meta http-equiv="Content-Type" content="text/html; cha ...

  8. 原生JS编写getByClass、addClass、removeClass、hasClass

    前言: 年后换了工作,在现在的公司写交互主要使用JS原生:刚刚入门前端的时候写交互一直用的原生JS,虽然用的不怎么样.后来去之前的公司之后,leader主张把jQuery用好,JS原生自然就熟练了:一 ...

  9. 原生JS轮播-各种效果的极简实现（二）面向对象版本的实现和优化

    之前写了一篇原生JS轮播,不过是非面向对象的,并且也没有添加上自动轮播.这里来写一下如何优化和进阶. 这里简单地介绍一下之前的代码,这是html结构 <body> <div clas ...

随机推荐

  1. 初学python里的yield send next

    今天看书的时候突然看到这个想起来一直没有怎么使用过send和next试了一下 发现了一个诡异的问题 import math def get_primes(start): while 1 : if is ...

  2. go程序注册为windows服务

    cmd下运行:nssm install 服务名 go打包好的exe文件 nssm下载地址:http://nssm.cc/,将下载好nssm.exe放到/windows/system32文件夹下

  3. 如何安全地关闭MySQL实例

    如何安全地关闭MySQL实例 转载自:http://imysql.com/2014/08/13/mysql-faq-howto-shutdown-mysqld-fulgraceful.shtml 本文 ...

  4. Metro UI 菜单(Winform)

    我有个项目需要要到菜单导航,就自己动作做了一个,感觉还可以,分享给大家.下载地址:http://files.cnblogs.com/files/dyj057/MetroUIMenu.zip 主要代码: ...

  5. Python札记 -- 使用easy_install进行模块/包管理

    今天在阅读以前项目代码时,发现里面使用的第三方模块的参数相当诡异,总是对不上.经过分析之后,发现是自己安装的第三方模块跟项目使用的版本不一致.在Python中进行模块/包管理的话,就不得不提到easy ...

  6. node.js-session问题

    在使用express使用session时发现怎么使用session都是undefined最后发现 app.use(express.cookieParser()); app.use(express.se ...

  7. 分享一个漂亮的ASP.NET MVC界面框架

    本文分享一个插件化的界面框架,该框架提供了用户.角色.权限管理功能,也提供了插件的管理和插件中心.下图是该界面框架的样式(全部源码和原理介绍下一篇分享,推荐越多,源码放的越早,呵呵). 要使用该界面框 ...

  8. 即时通信系统中如何实现：聊天消息加密，让通信更安全？ 【低调赠送：QQ高仿版GG 4.5 最新源码】

    加密重要的通信消息,是一个常见的需求.在一些政府部门的即时通信软件中(如税务系统),对聊天消息进行加密是非常重要的一个功能,因为谈话中可能会涉及到机密的数据.我在最新的GG 4.5中,增加了对聊天消息 ...

  9. 压力测试工具ab使用

    ab全名是apache bench,是apache自带的一款压力测试工具.它通过创建多个线程来模拟并发,测试目标是基于URL的,因此不论是什么web服务器都可以支持. 使用ab非常简单,进入apach ...

  10. Java多线程15：Queue、BlockingQueue以及利用BlockingQueue实现生产者/消费者模型

    Queue是什么 队列,是一种数据结构.除了优先级队列和LIFO队列外,队列都是以FIFO(先进先出)的方式对各个元素进行排序的.无论使用哪种排序方式,队列的头都是调用remove()或poll()移 ...