<!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. Happy Programming Contest（ZOJ3703）（01背包+路径储存）

    Happy Programming Contest  ZOJ3703 老实说:题目意思没看懂...(希望路过的大神指点) 最后那个the total penalty time是什么意思啊!!! 还是学 ...

  2. 骨骼动画的实现(OpenGL实现)

    人物模型动画一直是游戏中最重要的组成部分, 因此这里我们研究骨骼动画是如何实现的. 原理 首先模型通常是由多个三角形形成的网格构成, 每个三角形有三个顶点, 因此动画的根本原理就在于不同时间内为每个顶 ...

  3. HTML5学习生涯1--touchmove中遇到的问题

    在使用html5做在手机上显示轮播图片的效果时突然遇到touchmove事件在touchstart事件之后只触发了一次touchmove之后和touchend一起触发了一次,咦,这是怎么回事?怎么不和 ...

  4. 使用C#设计Fluent Interface

    我们经常使用的一些框架例如:EF,Automaper,NHibernate等都提供了非常优秀的Fluent Interface, 这样的API充分利用了VS的智能提示,而且写出来的代码非常整洁.我们如 ...

  5. 【C语言学习】《C Primer Plus》第9章 函数

    学习总结 1.函数有利于我们可以省去重复的代码,函数可以使程序更加模块化,从而有利于程序的阅读.修改和完善.我们在系统设计或架构设计的时候,往往追求的是模块化.组件化.松耦合,而函数就是其代码的表现. ...

  6. DeviceOne 竟然做出来如此复杂的App

    分享来自DeviceOne论坛 此文章分享自DeviceOne的论坛,论坛上的用户分享,下面有二维码扫描,可以进行安装和试用.支持android和ios两个 操作系统. 这个还没做完,目前已经完成了初 ...

  7. 团队项目——站立会议DAY6

    团队项目--站立会议 DAY6        团队成员介绍(5人):张靖颜.何玥.钟灵毓秀.赵莹.王梓萱        今日(2016/5/13),站立会议已进行了一周时间,大家将这一周所遇到的问题和 ...

  8. 基于Winform、WPF等的客户端文件下载

    有时候,我们用C#写一些客户端应用程序需要从服务器下载一些资源,如图片.dll.配置文件等.下面就来说一下,在Winform及WPF中如何下载文件. 我们的资源大多放在自己的网站上,或者从其他网站下载 ...

  9. Move to Github

    Hi,各位,好久不见.我已经将博客移动到了 Github 上.原因是我喜欢用 Markdown 而不是 WYSIWYG 的编辑器写博客.请访问新地址: http://lxconan.github.io

  10. java Decompiler的bug

    java Decompiler 有一个明显的bug是, 之前的打开jar文件,会被缓存起来,如果再次打开同名jar文件(jar内容替换~!),会导致仍然显示原来内容! . 必须关闭Decompiler ...