格子算法grid随机图片排列Word文档下载推荐.docx
《格子算法grid随机图片排列Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《格子算法grid随机图片排列Word文档下载推荐.docx(15页珍藏版)》请在冰豆网上搜索。
![格子算法grid随机图片排列Word文档下载推荐.docx](https://file1.bdocx.com/fileroot1/2022-11/24/2a4d9400-695a-490f-80a3-0173e4cb139a/2a4d9400-695a-490f-80a3-0173e4cb139a1.gif)
-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