代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>照片墻實(shí)例</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrap{
width: 792px;
height: 462px;
margin: 30px auto;
background-color: lightskyblue;
padding: 10px;
position: relative;
}
.wrap img{
float: left;
width: 250px;
height: 140px;
margin: 5px;
border: 2px solid lightcoral;
}
</style>
</head>
<body>
<div class="wrap" id="wrap">
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
<img src="img/5.jpg" alt="">
<img src="img/6.jpg" alt="">
<img src="img/7.jpg" alt="">
<img src="img/8.jpg" alt="">
<img src="img/9.jpg" alt="">
</div>
<script src="JS/00utils.js"></script>
<script src="JS/01Event.js"></script>
<script src="JS/02Animate.js"></script>
<script src="JS/04Drag.js"></script>
<script>
var oWrap=document.getElementById("wrap");
var aImg=oWrap.getElementsByTagName("img");
var zIndex=0;
var short=null;
for(var i=aImg.length-1; i>=0; i--){
//拖拽必須為定位布局，即將浮動(dòng)布局轉(zhuǎn)化為定位布局
var cur=aImg[i];
cur.style.left=(cur.l=cur.offsetLeft)+"px";//將位置保存在自己的私有屬性上
cur.style.top=(cur.t=cur.offsetTop)+"px";
cur.style.position="absolute";//先獲取位置，后設(shè)置定位；
cur.style.margin=0;
new Drag({ele:cur}).on("myDragDown",increaseZIndex).on("myDragMove",Collision).on("myDragUp",swapPos);//鏈?zhǔn)讲僮? }
//按下時(shí)，提高層級(jí)
function increaseZIndex() {
short=null;
this.ele.style.borderColor="yellow";
this.ele.style.zIndex=++zIndex;
}
//比較兩個(gè)圖片是否碰撞，返回布爾值
function isCollision(img1,img2) {
if((img1.offsetLeft+img1.offsetWidth<img2.offsetLeft) || (img1.offsetTop+img1.offsetHeight<img2.offsetTop) || (img1.offsetLeft>img2.offsetLeft+img2.offsetWidth) || (img1.offsetTop>img2.offsetTop+img2.offsetHeight)){
//四種情況只要有一種情況成立，就代表沒(méi)有碰到
return false;
}else{
return true;
}
}
//移動(dòng)過(guò)程中的判斷
function Collision() {
//此時(shí)this為實(shí)例對(duì)象，this.ele為當(dāng)前移動(dòng)的元素，與其他的所有圖片進(jìn)行比較
var ary=[];
for(var i=0; i<aImg.length; i++){
if(aImg[i]===this.ele) continue;//如果為移動(dòng)圖片本身就跳過(guò)此次循環(huán)；
if(isCollision(this.ele,aImg[i])){
ary.push(aImg[i]);
}
}
if(ary.length){
for(var i=0; i<ary.length; i++){
//將計(jì)算的值放在每個(gè)圖片自定義屬性身上
ary[i].dis=Math.sqrt(Math.pow(this.ele.offsetLeft-ary[i].offsetLeft,2)+Math.pow(this.ele.offsetTop-ary[i].offsetTop,2));
}
//對(duì)計(jì)算的值進(jìn)行排序，取最短的
ary.sort(function (a, b) {
return a.dis-b.dis;
});
short=ary[0];
short.style.borderColor="yellow";
for(var i=1; i<ary.length; i++){
ary[i].style.borderColor="lightcoral";
}
}else{//如果ary為空，則將short賦值為空；
if(short){short.style.borderColor="lightcoral";}
short=null;
}
}
function swapPos() {
//互換位置，即讓兩個(gè)圖片身上的自定義屬性值互換，然后各自設(shè)置各自身上的值；
if(short){//當(dāng)short存在的時(shí)候讓位置互換，不存在即為null則讓其回原來(lái)位置；
var tmp={};
tmp.l=this.ele.l;
tmp.t=this.ele.t;
this.ele.l=short.l;
this.ele.t=short.t;
short.l=tmp.l;
short.t=tmp.t;
/*animate({
ele:this.ele,
target:{
left:this.ele.l,
top:this.ele.t,
},
duration: 500,
effect: 2
});*/
short.style.zIndex=++zIndex;
this.ele.style.zIndex=++zIndex;
animate({
ele:short,
target:{
left:short.l,
top:short.t,
},
duration: 500,
effect: 2,
callback:function () {
this.style.borderColor="lightcoral";
}
});
}
//當(dāng)short為null的時(shí)候，讓元素回到自己位置
animate({
ele:this.ele,
target:{
left:this.ele.l,
top:this.ele.t,
},
duration: 500,
effect: 2,
callback:function () {
this.style.borderColor="lightcoral";
}
})
}
</script>
</body>
</html>
復(fù)習(xí)照片墻實(shí)例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>照片墻實(shí)例復(fù)習(xí)</title>
<style>
*{
margin: 0;
padding: 0;
}
h1{
width: 100%;
height: 80px;
line-height: 80px;
text-align: center;
}
.container{
width: 800px;
height: 470px;
background-color: lightskyblue;
padding: 10px;
margin: 0 auto;
box-sizing: border-box;
}
.container img{
float: left;
width: 250px;
height: 140px;
margin: 5px;
border: 2px solid lightcoral;
box-sizing: border-box;
}
</style>
</head>
<body>
<h1>美女照片墻</h1>
<div class="container">
<img src="./img/1.jpg" alt="tu"/><img src="./img/2.jpg" alt="tu"/><img src="./img/3.jpg" alt="tu"/><img src="./img/4.jpg" alt="tu"/><img src="./img/5.jpg" alt="tu"/><img src="./img/6.jpg" alt="tu"/><img src="./img/7.jpg" alt="tu"/><img src="./img/8.jpg" alt="tu"/><img src="./img/9.jpg" alt="tu"/>
</div>
<script src="js/myutils.js"></script>
<script src="js/myEvent.js"></script>
<script src="js/finallyAnimate.js"></script>
<script src="js/EventEmitter.js"></script>
<script src="js/Drag.js"></script>
<script>
//獲取元素
var oCon=utils.getByClass("container")[0];
var aImg=utils.getChildren(oCon,"img");
//如果使用拖拽必須為定位布局，所以需要將每個(gè)圖片變?yōu)槎ㄎ徊季?
//圖片相對(duì)于外容器進(jìn)行定位；所以外容器添加相對(duì)定位
toPosition();
function toPosition() {
utils.css(oCon,"position","relative");
//從最后一個(gè)開(kāi)始設(shè)置定位，獲取其位置值
for(var i=aImg.length-1; i>=0;i--){
//先獲取位置值，后設(shè)置絕對(duì)定位
aImg[i].initLeft=aImg[i].offsetLeft;
aImg[i].initTop=aImg[i].offsetTop;
utils.css(aImg[i],{
margin:0,
position: "absolute",
left:aImg[i].initLeft,
top:aImg[i].initTop
})
}
}
//圖片添加拖拽功能
imgDrag();
function imgDrag() {
for(var i=0; i<aImg.length; i++){
var drag=new Drag({
ele:aImg[i]
});
drag.on("mymousedown",myDragdown).on("mymousemove",myDragmove).on("mymouseup",myDragup);
}
//myDragdown函數(shù)
function myDragdown() {
//提高圖片的層級(jí)
this.bgc=utils.css(this.ele,"borderColor");
utils.css(this.ele,{
borderColor:"yellow",
zIndex:3
});
this.otherImg=utils.siblings(this.ele);
}
//myDragmove函數(shù)
function myDragmove() {
this.ary=[];
for(var i=0; i<this.otherImg.length; i++){
//比較兩個(gè)圖片之間的位置
var tt=utils.offset(this.ele).top+this.ele.offsetHeight<utils.offset(this.otherImg[i]).top;
var tb=utils.offset(this.ele).top>utils.offset(this.otherImg[i]).top+this.otherImg[i].offsetHeight;
var rl=utils.offset(this.ele).left+this.ele.offsetWidth<utils.offset(this.otherImg[i]).left;
var lr=utils.offset(this.ele).left>utils.offset(this.otherImg[i]).left+this.otherImg[i].offsetWidth;
utils.css(this.otherImg[i],{
borderColor:this.bgc,
zIndex:1
});
if(!(tt||tb||rl||lr)){
//計(jì)算出距離，綁定在元素的自定義屬性上
this.otherImg[i].short=imgShort(this.ele,this.otherImg[i]);
this.ary.push(this.otherImg[i]);
}
}
//數(shù)組進(jìn)行排序，排序目標(biāo)為圖片身上的short屬性
if(this.ary.length>0){
this.ary.sort(function (a,b) {
a=a.short;
b=b.short;
return a-b;//升序
});
//取最短的改變邊框顏色，其他的恢復(fù)原邊框顏色；
utils.css(this.ary[0],{
borderColor:"yellow",
zIndex:2
});
}
//比較數(shù)組中的元素哪個(gè)與移動(dòng)元素重合最多
//計(jì)算兩個(gè)圖片左上角點(diǎn)之間的距離，最短的，重合度越高
function imgShort(curImg,tarImg) {
var curImgLeft=utils.offset(curImg).left;
var curImgTop=utils.offset(curImg).top;
var tarImgLeft=utils.offset(tarImg).left;
var tarImgTop=utils.offset(tarImg).top;
return Math.pow(tarImgLeft-curImgLeft,2)+Math.pow(tarImgTop-curImgTop,2);
}
}
//myDragup
function myDragup() {
//鼠標(biāo)抬起事件后，判斷ary的長(zhǎng)度
if(!this.ary){
utils.css(this.ele,"borderColor",this.bgc);
return;
}
if(this.ary.length>0){
//如果數(shù)組不為空，就讓移動(dòng)元素與距離最短的互換位置；
var l,t;
l=this.ele.initLeft;
t=this.ele.initTop;
this.ele.initLeft=this.ary[0].initLeft;
this.ele.initTop=this.ary[0].initTop;
this.ary[0].initLeft=l;
this.ary[0].initTop=t;
}
var othis=this;
for(var i=0; i<aImg.length; i++){
animate({
ele:aImg[i],
target:{
left:aImg[i].initLeft,
top:aImg[i].initTop
},
duration:300,
callback:function () {
utils.css(this,{
borderColor:othis.bgc,
zIndex:1
});
othis.ary=null;
}
})
}
}
}
</script>
</body>
</html>
