摘要：點(diǎn)擊格子，首先比較該格子是否與空白格子直接相鄰，如果是就交換格子的和值進(jìn)行換位獲取空白的格子對(duì)象值互換接下來是把上傳的圖片設(shè)置成格子背景，通過監(jiān)聽的事件來獲取圖片文件該方法將轉(zhuǎn)換成可訪問的本地路徑重新設(shè)置格子背景源碼地址點(diǎn)擊訪問完

點(diǎn)擊跳轉(zhuǎn)

圖例原理：

上圖的九宮格圖例，每個(gè)格子都有一個(gè)(x,y)的坐標(biāo)，假如格子9是空白格子，怎么知道6和8是它的直接相鄰格子呢。這時(shí)候就體現(xiàn)出格子坐標(biāo)(x,y)的作用了， 使用公式：|(x₆ - x₉)| + |(y₆ - y₉)| = 1，將空白格子9的坐標(biāo)與格子6的坐標(biāo)進(jìn)行對(duì)應(yīng)坐標(biāo)的差值的絕對(duì)值的和等于1，就證明它們是直接相鄰格子，可進(jìn)行移動(dòng)互換。

詳細(xì)原理請(qǐng)點(diǎn)擊：跳轉(zhuǎn)

flex實(shí)現(xiàn)九宮格布局：

    

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
        
9
    

2 . 現(xiàn)在的布局是這樣子的：

3 . 分析：每個(gè)li代表一個(gè)格子，自定義屬性data-x和data-y代表坐標(biāo)(x, y)；而樣式order用于對(duì)格子進(jìn)行移動(dòng)排序；格子9添加id="empty"用于標(biāo)識(shí)為空白格子。
4 . 因?yàn)楦褡拥膶挾仁峭ㄟ^百分比設(shè)置的，會(huì)根據(jù)不同屏幕寬度的變化而變化；而且我們需要正方形的小格子，所以格子的高度需要js動(dòng)態(tài)計(jì)算：

// 設(shè)置格子的高度、背景圖片的尺寸
setChildStyle() {
  this.childWidth = window.getComputedStyle(this.oChild[0], false).width; // 獲取格子寬度
  console.log(this.childWidth);
  for (let i = 0; i < this.oChild.length; i++) {
    this.oChild[i].style.height = `${this.childWidth}`;
  }
}

5 . 現(xiàn)在變成

6 . 現(xiàn)在給每個(gè)格子設(shè)置背景圖片的尺寸（background-size），將格子的background-size的寬度設(shè)置成格子父節(jié)點(diǎn)ul的寬度，高度為auto，然后通過backgound-position進(jìn)行定位，用格子的背景拼湊成一張完整的圖片

setChildStyle() {
  this.childWidth = window.getComputedStyle(this.oChild[0], false).width;
  console.log(this.childWidth);
  for (let i = 0; i < this.oChild.length; i++) {
     this.oChild[i].style.height = `${this.childWidth}`;
     this.oChild[i].style.backgroundSize = `${this.ulWidth} auto`;
     this.setBgpositon(this.oChild[i]);
  }
}

7 . 其實(shí)每個(gè)格子的背景圖片都是同一張，只不過是通過background-position 對(duì)背景圖片進(jìn)行定位，讓每個(gè)格子只顯示圖片背景的九分之一，

// 設(shè)置背景圖在格子的位置
setBgpositon(chiObj) {
  let x = chiObj.getAttribute("data-x") - 1;
  let y = chiObj.getAttribute("data-y") - 1;
  chiObj.style.backgroundPosition = `${-x*parseInt(this.childWidth)}px ${-y*parseInt(this.childWidth)}px`;
}

如下圖視：

8 . 設(shè)置默認(rèn)背景圖片后：

// 設(shè)置格子的背景圖片
setBgImg(imgUrl) {
  for (let i = 0; i < this.oChild.length - 1; i++) {
    this.oChild[i].style.backgroundImage = `url(${imgUrl})`;
  }
}

9 . 接下來把格子擼成可移動(dòng)的，與空白格子直接相鄰的格子都可以與空白格子換位，一開始的order樣式就起作用了。點(diǎn)擊格子，首先比較該格子是否與空白格子直接相鄰，如果是就交換格子的data-x、data-y和order值進(jìn)行換位：

childEvent() {
  let that = this;
  let oEmptyChild = document.getElementById("empty"); // 獲取空白的格子對(duì)象
  this.oUl[0].addEventListener("click", function(ev){
    let target = ev.target;
    let targetX, targetY, targetOrder;
    let iEmptyX, iEmptyY, iEmptyOrder;
    if (target.className != "child" ) return false;
    iEmptyX = oEmptyChild.getAttribute("data-x");
    iEmptyY = oEmptyChild.getAttribute("data-y");
    iEmptyOrder = window.getComputedStyle(oEmptyChild, false).order;
    targetX = target.getAttribute("data-x");
    targetY = target.getAttribute("data-y");
    targetOrder = window.getComputedStyle(target, false).order;
    if (Math.abs(targetX - iEmptyX) + Math.abs(targetY - iEmptyY) == 1) {
      // data-x data-y order 值互換
      [iEmptyX, targetX] = [targetX, iEmptyX];
      [iEmptyY, targetY] = [targetY, iEmptyY];
      [iEmptyOrder, targetOrder] = [targetOrder, iEmptyOrder];

      oEmptyChild.setAttribute("data-x", iEmptyX);
      oEmptyChild.setAttribute("data-y", iEmptyY);
      oEmptyChild.style.order = iEmptyOrder;
      target.setAttribute("data-x", targetX);
      target.setAttribute("data-y", targetY);
      target.style.order = targetOrder;
    }
  }, false);
}

10 . 接下來是把上傳的img圖片設(shè)置成格子背景，通過監(jiān)聽input type="file"的change事件來獲取圖片文件files：

imgEvent() {
  let that = this;
  this.oFile.addEventListener("change", function(){
    let imgUrl = window.URL.createObjectURL(this.files[0]); // 該方法將files轉(zhuǎn)換成img可訪問的本地路徑
    that.oImg.setAttribute("src", imgUrl);
    that.oImg.onload = function() {
      that.setBgImg(imgUrl); // 重新設(shè)置格子背景
    }
  }, false);
}

11 . 源碼地址 點(diǎn)擊訪問

12 . （完）