格子算法grid随机图片排列Word文档下载推荐.docx
《格子算法grid随机图片排列Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《格子算法grid随机图片排列Word文档下载推荐.docx（15页珍藏版）》请在冰豆网上搜索。
-moz-border-radius:
-webkit-border-radius:
box-shadow:
2px3px5px#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-gradient（top,#fefefe,#f6f6f6,#f3f3f3,#f2f2f2,#e0e0e2）;
-webkit-gradient（linear,00,0100%,from（#fefefe）,to（#e0e0e2））;
-webkit-linear-gradient（00,#fefefe,#f6f6f6,#f3f3f3,#f2f2f2,#e0e0e2）;
/style>
script>
var$id=function（o）{returndocument.getElementById（o）||o;
};
vargetElementsByClassName=function（className,parent,tag）{
parent=parent||document;
if（parent.getElementsByClassName）{
returnparent.getElementsByClassName（className）
}else{
tag=tag||'
*'
;
varreturnElements=[]
varels=parent.getElementsByTagName（tag）;
className=className.replace（/\-/g,"
\\-"
）;
varpattern=newRegExp（"
（^|\\s）"
+className+"
（\\s|$）"
vari=0;
while（i<
els.length）{
if（pattern.test（els[i].className））{
returnElements.push（els[i]）;
}
i++;
returnreturnElements;
varUtil=newObject（）;
Util.getOffset=function（el,isLeft）{
varretValue=0;
//while（el!
=null）{
retValue+=el["
offset"
+（isLeft?
"
Left"
:
Top"
）];
//el=el.offsetParent;
//}
returnretValue;
Util.bindFunction=function（el,fucName）{
returnfunction（）{
returnel[fucName].apply（el,arguments）;
};
Util.re_calcOff=function（el）{
for（vari=0;
i<
Util.dragArray.length;
i++）{
varele=Util.dragArray[i];
ele.elm.pagePosLeft=Util.getOffset（ele.elm,true）;
ele.elm.pagePosTop=Util.getOffset（ele.elm,false）;
varnextSib=el.elm.nextSibling;
while（nextSib）{
nextSib.pagePosTop-=el.elm.offsetHeight;
nextSib=nextSib.nextSibling;
Util.hide=function（）{
Util.rootElement.style.display="
none"
Util.show=function（）{
"
ghostElement=null;
found=null;
getGhostElement=function（）{
if（!
ghostElement）{
ghostElement=document.createElement（"
DIV"
ghostElement.className="
MBoxghostBox"
returnghostElement;
functiondraggable（el）{
this._dragStart=start_Drag;
this._drag=when_Drag;
this._dragEnd=end_Drag;
this._afterDrag=after_Drag;
this.isDragging=false;
this.elm=el;
this.hasIFrame=this.elm.getElementsByTagName（"
IFRAME"
）.length>
0;
Drag.init（el,this.elm）;
this.elm.onDragStart=Util.bindFunction（this,"
_dragStart"
this.elm.onDrag=Util.bindFunction（this,"
_drag"
this.elm.onDragEnd=Util.bindFunction（this,"
_dragEnd"
functionstart_Drag（）{
Util.re_calcOff（this）;
this.origNextSibling=this.elm.nextSibling;
var_ghostElement=getGhostElement（）;
varoffH=this.elm.offsetHeight;
varoffW=this.elm.offsetWidth;
varoffLeft=Util.getOffset（this.elm,true）;
varoffTop=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.nextSibling）;
this.elm.style.position="
absolute"
this.elm.style.zIndex=100;
this.elm.style.left=offLeft+"
this.elm.style.top=offTop+"
//Util.show（）;
returnfalse;
functionwhen_Drag（clientX,clientY）{
this.isDragging）{
this.elm.style.filter="
alpha（opacity=70）"
this.elm.style.opacity=0.7;
this.isDragging=true;
found=null;
varmax_distance=100000000;
vardistance=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.elm.pagePosLeft<
clientX）{
found.elm.parentNode.insertBefore（_ghostElement,found.elm.nextSibling）;
}else{
found.elm.parentNode.insertBefore（_ghostElement,found.elm）;
}
functionend_Drag（）{
visible'
if（this._afterDrag（））{
returntrue;
functionafter_Drag（）{
varreturnValue=false;
this.elm.style.width="
this.elm.style.zIndex="
this.elm.style.opacity="
varele=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.rootElement）;
returnreturnValue;
varDrag={
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=newFunction（）;
element.onDragEnd=newFunction（）;
element.onDrag=newFunction（）;
},
start:
function（event）{
varelement=Drag.obj=this.obj;
event=Drag.fixE（event）;
if（event.which!
=1）{
returntrue;
element.onDragStart（）;
element.lastMouseX=event.clientX;
element.lastMouseY=event.clientY;
document.onmouseup=Drag.end;
document.onmousemove=Drag.drag;
returnfalse;
drag:
event=Drag.fixE（event）;
if（event.which==0）{
returnDrag.end（）;
varelement=Drag.obj;
var_clientX=event.clientY;
var_clientY=event.clientX;
if（element.lastMouseX==_clientY&
&
element.lastMouseY==_clientX）{
returnfalse;
};
if（_clientX+document.documentElement.scrollTop+document.body.scrollTop<
0||_clientX>
document.documentElement.offsetHeight）{
varsTo=0;
if（_clientX<
0）{
sTo=_clientX;
if（（_clientX-document.documentElement.clientHeight）>
0）{
sTo=_clientX-document.documentElement.clientHeight;
window.scrollBy（0,sTo）;
var_lastX=parseInt（element.style.top）;
var_lastY=parseInt（element.style.left）;
varnewX,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.onmousemove=null;
document.onmouseup=null;
var_onDragEndFuc=Drag.obj.onDragEnd（）;
Drag.obj=null;
return_onDragEndFuc;
fixE:
function（ig_）{
if（typeofig_=="
undefined"
）{
ig_=window.event;
if（typeofig_.layerX=="
ig_.layerX=ig_.offsetX;
if（typeofig_.layerY=="
ig_.layerY=ig_.offsetY;
if（typeofig_.which=="
ig_.which=ig_.button;
returnig_;
varinitDrag=function（el）{
Util.rootElement=el;
Util.elem=Util.rootElement.children;
Util.dragArray=newArray（）;
varcounter=0;
Util.elem.length;
varelem=Util.elem[i];
Util.dragArray[counter]=newdraggable（elem）;
counter++;
box.setIfr（Util.rootElement）;
/*格子排序*/
varbox={};
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+"
vari=0,nx,ny;
while（i<
this.mbox.length）{
if（getElementsByClassName（"
bigBox"
this.mbox[i],'
nx=Math.ceil（this.mbox[i].offsetWidth/this.gen.w）;
nx=（nx>
this.row）?
this.row:
nx;
//大小超出限制
ny=Math.ceil（this.mbox[i].offsetHeight/this.gen.h）;
this.size.push（[nx,ny]）;
this.size.push
（1）;
i++;
box.sort（el）;
box.setIfr=function（el）{//大格子初始化
varifr=getElementsByClassName（"
if（ifr.length==0）returnfalse;
vari=0,nx,ny,theifr;
ifr.length）{
theifr=getElementsByClassName（"
innerBox"
ifr[i],'
nx=Math.ceil（theifr[0].offsetWidth/this.gen.w）;
//bigBox横向占的块数
ny=Math.ceil（theifr[0].offsetHeight/this.gen.h）;
ifr[i].style.width=nx*this.gen.w-14+'
px'
;
ifr[i].style.height=ny*this.gen.h-14+'
box.sort=function（el）{
vary=0,x=0,temp={x:
Infinity,y:
Infinity},flag=Infinity,name;
for（varn=0;
n<
this.size.length;
n++）{
if（flag==0）{
x=temp.x;
y=temp.y;
flag=flag-1;
if（x>
box.row-1）{//换行
x=0;
y++;
name=x+'
_'
+y;
//对象属性名（反映占领的格子）
if（this.hasN（name））{//判断属性名是否存在
n--;
x++;
if（flag<
Infinity）flag=flag+1;
continue;
if（!
this.size[n].length）{//普通格子
this.obj[n
升级会员 