格子算法grid随机图片排列Word文档下载推荐.docx

1、 -moz-border-radius: -webkit-border-radius: box-shadow:2px 3px 5px #d3d3d3; -moz-box-shadow: -webkit-box-shadow: filter:progid:DXImageTransform.Microsoft.gradient（startColorstr=#fefefe, endColorstr=#e0e0e2）; background: linear-gradient（top, #fefefe, #f6f6f6 ,#f3f3f3,#f2f2f2,#e0e0e2）; -moz-linear-gra

2、dient（top, #fefefe, #f6f6f6 ,#f3f3f3,#f2f2f2,#e0e0e2）; -webkit-gradient（linear, 0 0, 0 100% , from（#fefefe）,to（#e0e0e2）; -webkit-linear-gradient（0 0, #fefefe, #f6f6f6 ,#f3f3f3,#f2f2f2,#e0e0e2）;/stylescriptvar $id = function（o） return document.getElementById（o） | o ;var getElementsByClassName = funct

3、ion（className,parent,tag） parent = parent | document; if（parent.getElementsByClassName） return parent.getElementsByClassName（className） else tag = tag | *; var returnElements = var els = parent.getElementsByTagName（tag）; className = className.replace（/-/g, -）; var pattern = new RegExp（|s）+className+

4、（s|$） var i = 0; while（i els.length） if （pattern.test（elsi.className） ） returnElements.push（elsi）; i+; return returnElements;var Util = new Object（）;Util.getOffset = function （el, isLeft） var retValue = 0; / while （el != null） retValue += eloffset + （isLeft ? Left :Top）; / el = el.offsetParent; / re

5、turn retValue;Util.bindFunction = function （el, fucName） return function （） return elfucName.apply（el, arguments）; ;Util.re_calcOff = function （el） for （var i = 0; i 0; Drag.init（el, this.elm）; this.elm.onDragStart = Util.bindFunction（this, _dragStart this.elm.onDrag = Util.bindFunction（this, _drag

6、this.elm.onDragEnd = Util.bindFunction（this, _dragEndfunction start_Drag（） Util.re_calcOff（this）; this.origNextSibling = this.elm.nextSibling; var _ghostElement = getGhostElement（）; var offH = this.elm.offsetHeight; var offW = this.elm.offsetWidth; var offLeft = Util.getOffset（this.elm, true）; var o

7、ffTop = Util.getOffset（this.elm, false）; / Util.hide（）; /this.elm.parentNode.getElementsByTagName（iframe）0.style.visibility = hidden this.elm.style.width = offW + px _ghostElement.style.height = offH + _ghostElement.style.width = offW + this.elm.parentNode.insertBefore（_ghostElement, this.elm.nextSi

8、bling）; this.elm.style.position = absolute this.elm.style.zIndex = 100; this.elm.style.left = offLeft + this.elm.style.top = offTop + /Util.show（）; return false;function when_Drag（clientX, clientY） this.isDragging） this.elm.style.filter = alpha（opacity=70） this.elm.style.opacity = 0.7; this.isDraggi

9、ng = true; found = null; var max_distance = 100000000; var distance = Math.sqrt（Math.pow（clientX - ele.elm.pagePosLeft, 2） + Math.pow（clientY - ele.elm.offsetTop, 2）; if （ele = this） continue; if （isNaN（distance） if （distance max_distance） max_distance = distance; found = ele; if （found ! if（this.el

10、m.pagePosLeft clientX） found.elm.parentNode.insertBefore（_ghostElement, found.elm.nextSibling）; else found.elm.parentNode.insertBefore（_ghostElement, found.elm）; function end_Drag（） visible if （this._afterDrag（） return true;function after_Drag（） var returnValue = false; this.elm.style.width = this.e

11、lm.style.zIndex = this.elm.style.opacity = var ele = getGhostElement（）; if （ele.nextSibling != this.origNextSibling） ele.parentNode.insertBefore（found.elm, this.elm）; ele.parentNode.insertBefore（this.elm, ele.nextSibling）; returnValue = true; ele.parentNode.removeChild（ele）; box.init（Util.rootElemen

12、t）; return returnValue;var Drag = obj:null, init:function （elementHeader, element） elementHeader.onmousedown = Drag.start; elementHeader.obj = element; if （isNaN（parseInt（element.style.left） element.style.left = 0px if （isNaN（parseInt（element.style.top） element.style.top = element.onDragStart = new

13、Function（）; element.onDragEnd = new Function（）; element.onDrag = new Function（）; , start:function （event） var element = Drag.obj = this.obj; event = Drag.fixE（event）; if （event.which != 1） return true; element.onDragStart（）; element.lastMouseX = event.clientX; element.lastMouseY = event.clientY; doc

14、ument.onmouseup = Drag.end; document.onmousemove = Drag.drag; return false; drag: event = Drag.fixE（event）; if （event.which = 0） return Drag.end（）; var element = Drag.obj; var _clientX = event.clientY; var _clientY = event.clientX; if （element.lastMouseX = _clientY & element.lastMouseY = _clientX） r

15、eturn false; ; if（_clientX + document.documentElement.scrollTop + document.body.scrollTop document.documentElement.offsetHeight） var sTo=0; if（ _clientX 0） sTo=_clientX - document.documentElement.clientHeight; window.scrollBy（0,sTo）; var _lastX = parseInt（element.style.top）; var _lastY = parseInt（el

16、ement.style.left）; var newX, newY; newX = _lastY + _clientY - element.lastMouseX; newY = _lastX + _clientX - element.lastMouseY; element.style.left = newX + element.style.top = newY + sTo + element.lastMouseX = _clientY; element.lastMouseY = _clientX; element.onDrag（newX, newY）; end: document.onmous

17、emove = null; document.onmouseup = null; var _onDragEndFuc = Drag.obj.onDragEnd（）; Drag.obj = null; return _onDragEndFuc; fixE:function （ig_） if （typeof ig_ = undefined） ig_ = window.event; if （typeof ig_.layerX = ig_.layerX = ig_.offsetX; if （typeof ig_.layerY = ig_.layerY = ig_.offsetY; if （typeof

18、 ig_.which = ig_.which = ig_.button; return ig_;var initDrag = function （el） Util.rootElement = el; Util.elem = Util.rootElement.children; Util.dragArray = new Array（）; var counter = 0; Util.elem.length; var elem = Util.elemi; Util.dragArraycounter = new draggable（elem）; counter+; box.setIfr（Util.ro

19、otElement）;/* 格子排序 */var box=;box.gen=w:200,h:180;box.init=function（el） box.size=; /格子,1,2表示1X2的大格子 box.obj=; box.oArray=; box.maxY=-1; box.mbox = getElementsByClassName（MBox,el,div box.row = document.documentElement.offsetWidth / box.gen.w /每行标准格数 el.style.width = box.row * box.gen.w + var i = 0 ,

20、nx, ny; while（ i this.row） ? this.row : nx; /大小超出限制 ny=Math.ceil（this.mboxi.offsetHeight / this.gen.h）; this.size.push（nx,ny）; this.size.push（1）; i+; box.sort（el）;box.setIfr=function（el） /大格子初始化 var ifr = getElementsByClassName（ if（ifr.length=0） return false; var i = 0, nx, ny, theifr; ifr.length） t

21、heifr = getElementsByClassName（innerBox,ifri, nx=Math.ceil（theifr0.offsetWidth / this.gen.w）; /bigBox横向占的块数 ny=Math.ceil（theifr0.offsetHeight / this.gen.h）; ifri.style.width = nx*this.gen.w-14 + px ; ifri.style.height = ny*this.gen.h-14 + box.sort=function（el） var y=0, x=0, temp=x:Infinity, y:Infinity, flag=Infinity, name; for（var n=0; n box.row-1） /换行 x=0; y+; name=x+_+y; /对象属性名（反映占领的格子） if（this.hasN（name） /判断属性名是否存在 n-; x+; if（flagInfinity） flag=flag+1; continue; if（!this.sizen.length） /普通格子 this.objn