JS Photo Wall Instance effect (random sort)

Source: Internet
Author: User
Tags tagname
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&Gt;</td> </tr> </table>
Tip: You can modify some of the code before running

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.