<!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文件读取编码错误问题解决之（PyCharm开发工具默认设置的坑。。。）

    刚接触Python学习,正准备做个爬虫的例子,谁知道代码一开始就遇到了一个大坑,狂汗啊. 问题是这样的:我通过代码爬取了博客园首页的HTML代码并存入到blog.txt文件当中,然后准备读取出来之后进 ...

  2. C#中virtual与abstract的区别

    C#中virtual与abstract的区别 C#的virtual & abstract经常让人混淆,这两个限定词都是为了让子类进行重新定义,覆盖父类的定义.但是用法上差别很大. a)     ...

  3. c# 动态执行脚本,相关的几个脚本引擎.

    Jint   嵌入式的javascript脚本支持引擎,一直都在更新,对各种方法支持也比较好,可以 C# 交互. https://github.com/sebastienros/jint Jurass ...

  4. java 泛型的几点备忘

    1.在java虚拟机中是没有泛型的,所有泛型类的参数都会被擦除,如下: public void test(List<String> list, int num){} public void ...

  5. angular.js 例子

    angular.js是一个前端的MVC框架,12年的时候曾近在一个portal平台的项目中使用过. 下面给出一个angular.js的典型例子,涵盖一些基础的知识点,用以复习备忘: <html ...

  6. 招聘：有兴趣做一个与Android对等的操作系统么？

    招聘:有兴趣做一个与Android对等的操作系统么? 前不久我发了一篇<八一八招聘的那些事儿>讲了我自己作为求职者对招聘的一些看法.那个时候我还在求职,对求职的结果还是挺满意的,五家公司面 ...

  7. Spring-Context之九:在bean定义中使用继承

    定义bean时有个abstract属性,可以设置为true或false,默认为false. 1 2 3 4 <bean id="animal" class="Ani ...

  8. 爱上MVC~为DisplayNameFor添加扩展，支持PagedList集合

    回到目录 DisplayNameFor方法是MVC提供给我们的,它可以将模型的DisplayName特性的值显示到页面上,这对程序员来说很是方便,在进行实体设计时,可以指定它的显示名称,然后MVC引擎 ...

  9. EF架构~充血模型设置不被持久化的属性

    回到目录 在Poco实体中,一般只有属性没有方法,这在软件设计中称为贫血模型,而在DDD领域驱动设计中,比较提倡充血模型,即你的Poco实体中,即有属性,也有操作属性的方法,注意这里说的是操作属性的方 ...

  10. lua如何构造类

    function class(super, autoConstructSuper) local classType = {}; classType.autoConstructSuper = autoC ...