Tip: You can modify some of the code before running
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title>js photo Wall A multi-instance demo (object-oriented version) </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 (img/photo/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 ;p adding:0 15px 15px 0;} Box li{float:left;width:140px;height:105px;padding:6px;background: #fff; border:1px solid #c3c3c3;d isplay: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" >//Get ID var $ = function (ID) {return typeof id = = "string"? document.getElementById (ID): ID}; Get tagName var $$ = function (TagName, oparent) {return (Oparent | | document). getElementsByTagName (TagName)}; Gets the 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}; Gets the element position 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}}; Create a photo Wall object 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.createdocumentfra Gment (); 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]). "}" 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"}}, 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; Generate picture data for (i = 0; i < i++) Adata[adata.length] = "img/photo/" + i + ". jpg"; Loops to create multiple instances 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> </pead> <body> <div class= "box" > <p class= "title" ><span> a bunch of </ span> random sort </p> <ul></ul> </div> <div class= "box" > <p class= "title" ><spa N> a bunch of </span> random sort </p> <ul></ul> </div> </body> </ptml≫</td> </tr> </table>
Tip: You can modify some of the code before running
