<!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. LNMP 部署

    一.防火墙配置 CentOS 7.x默认使用的是firewall作为防火墙,这里改为iptables防火墙. 1.关闭firewall: systemctl stop firewalld.servic ...

  2. Linux搭建Scrapy爬虫集成开发环境

    安装Python 下载地址:http://www.python.org/, Python 有 Python 2 和 Python 3 两个版本, 语法有些区别,ubuntu上自带了python2.7. ...

  3. [Openwrt 项目开发笔记]：Openwrt平台搭建（一）

    [Openwrt项目开发笔记]系列文章传送门:http://www.cnblogs.com/double-win/p/3888399.html 正文: 最近开始着手进行Openwrt平台的物联网网关设 ...

  4. 【WEB】Tomcat基础使用知识

    由于当前项目性质原因,从开始到现在使用的WEB服务器都是WAS,而Tomcat的基础知识也慢慢地被遗忘.由于种种原因,让我参与到了另外一个全新的项目,使用的是Tomcat6.X,所以复习是必须的,而写 ...

  5. C#调试入门篇

    DotNet程序的调试,是DotNet程序员必备的技能之一,开发出稳定的程序.解决程序的疑难杂症都需要很强大的调试能力.DotNet调试有很多方法和技巧.现在本文就介绍一下借助DebugView工具进 ...

  6. 关于大型网站技术演进的思考（十三）--网站静态化处理—CSI（5）

    讲完了SSI,ESI,下面就要讲讲CSI了 ,CSI是浏览器端的动静整合方案,当我文章发表后有朋友就问我,CSI技术是不是就是通过ajax来加载数据啊,我当时的回答只是说你的理解有点片面,那么到底什么 ...

  7. 面向对象架构模式之：领域模型（Domain Model）

    一:面向对象设计中最简单的部分与最难的部分 如果说事务脚本是 面向过程 的,那么领域模型就是 面向对象 的.面向对象的一个很重要的点就是:“把事情交给最适合的类去做”,即:“你得在一个个领域类之间跳转 ...

  8. Windows 安装 MongoDB 服务

    第一步 以管理员权限打开命令提示符 按Windows+R键(Ctrl和Alt中间的那个,有微软Logo的键),输入cmd打开命令提示符 第二步 创建数据库目录. 使用mkdir命令,创建数据库的目录和 ...

  9. memcache和redis区别

    memcache官方定义 Free & open source, high-performance, distributed memory object caching system, gen ...

  10. Java程序员的日常 —— 注册工厂的妙用

    注册工厂是一种很常用的框架书写方法,它适合于快速创建相同类型的对象. 举个栗子 比如一个家具工厂,有沙发.椅子.茶几等等,正常的编程模式是这样的: //创建 class 沙发{} class 椅子{} ...