摘要：每一個(gè)方格就是數(shù)組的一個(gè)個(gè)體。收工完成效果因?yàn)槲覍?shí)在是不想找那么多圖片，大概只拷貝了十份，然后乘以，所以會(huì)出現(xiàn)一個(gè)頭像重復(fù)三次的情況源碼。

在看淘寶前端團(tuán)隊(duì)的博客的時(shí)候，無(wú)意中點(diǎn)進(jìn)了關(guān)于我們這個(gè)頁(yè)面，其中有個(gè)動(dòng)畫(huà)我覺(jué)得很有趣，也很通用，感覺(jué)在哪里都可以使用一樣，效果如下圖所示：

每次刷新的頭像和‘You’的位置都是不同的，說(shuō)實(shí)話，我覺(jué)得蠻有意思的，于是我自己嘗試去實(shí)現(xiàn)了一下。
下面我會(huì)從我的角度去分析實(shí)現(xiàn)這樣的效果，因?yàn)槲也恢繤ED他們是怎么實(shí)現(xiàn)的

先分析下小方塊的結(jié)構(gòu)，就是：

img是頭像，span控制背景色，i用來(lái)制作鏡面的效果。
我們知道了這樣一個(gè)效果，本人近視，十米開(kāi)外男女不分的那種，然后看這個(gè)布局看著好熟悉，我看到的這個(gè)結(jié)構(gòu)大概是這種感覺(jué)

[
  "                 ",
  "  xxxx  xx  xxx  ",
  "  x    x  x  x   ",
  "  xxxx x  x  x   ",
  "  x    x  x  x   ",
  "  xxxx  xx  xxx  ",
  "                 ",
]

哎嘿嘿，這個(gè)不就是是個(gè)字符串?dāng)?shù)組嗎嘛，那我當(dāng)作二維數(shù)組處理，豈不是可以輕易的找出要顯示的字符的橫坐標(biāo)和縱坐標(biāo)，豈不美哉。先別急著擼起袖子就是干，根據(jù)我長(zhǎng)年不思考擼起袖子就是干被坑的經(jīng)驗(yàn)，我想了一會(huì)，似乎用一圍數(shù)組更好一點(diǎn)，dom方面的處理也更加方便一些。每一個(gè)方格就是數(shù)組的一個(gè)個(gè)體。
想到這，我掐指一算我大概需要126個(gè)方格，方格呈7 * 18的布局方式，我又掐指一算我好像要寫(xiě)126的span標(biāo)簽,就像下面這樣：
萬(wàn)能的編輯器，我后來(lái)發(fā)現(xiàn)原來(lái)可以span*126+tab，機(jī)智如我，美滋滋。

?。磕銌?wèn)我上面的span是怎么弄的，我靠，我當(dāng)然是手慢慢敲的的啊

呃，感覺(jué)還是用js來(lái)生成更好些吧，方便，代碼量也少很多，好，我們擼起袖子就是干：

const faceList = (new Array(126)).map(() => {
  const face = document.createElement("span");
  //...
  return face;
});
document.body.append(faceList);

我們打開(kāi)網(wǎng)頁(yè)：

這是個(gè)什么玩意？
好吧，不開(kāi)玩喜了，我們舉個(gè)例子吧，現(xiàn)在我想創(chuàng)建一個(gè)長(zhǎng)度為十，數(shù)組成員都是相應(yīng)下標(biāo)的數(shù)組，應(yīng)該怎么辦？

const arr = (new Array(10)).map...

打住，正確的姿勢(shì)是這樣的：

Array.from({length: 10}, (v, i) => i);//第一種
Array.apply(null, { length: 10 }).map(//...);//第二種
//歡迎補(bǔ)充更多

當(dāng)然你還可以使用遞歸的方式，我本人來(lái)說(shuō)，一直使用第一種，感覺(jué)比較好用，我們重新實(shí)現(xiàn)下：

const faceList = Array.from({ length: 126 }, () => {
  const face = document.createElement("span");
  const img = document.createElement("img");
  const i = document.createElement("i");
  i.style.left = "-100%";
  face.append(img);
  face.append(i);
  return face;
});

將dom渲染到頁(yè)面，緊接著是找出我們要渲染字符的位置了：

let EOITextArr = 
[
  "                 ",
  "  xxxx  xx  xxx  ",
  "  x    x  x  x   ",
  "  xxxx x  x  x   ",
  "  x    x  x  x   ",
  "  xxxx  xx  xxx  ",
  "                 ",
];
let EOIArr = [];
EOITextArr.forEach((v, i) => {
  for(let j = 1; j < v.length; j++) {
    if (v[j] === "x") {
      EOIArr.push(i * 18 + j);
    }
  }
})

不要忘了，我們有圖片和span兩種需要做處理的元素，所以我們需要兩組數(shù)組，淺復(fù)制就好了：

const textArr = [].concat(EOIArr);
const imgArr = [].concat(EOIArr);

這樣我們初期的準(zhǔn)備工作已經(jīng)完成，我們拿到了dom，還有需要處理的元素的位置，下面就是處理背景色和圖片如何顯示。我們分別拿到了要改變的span的數(shù)組和img的數(shù)組，我們只需要先改變背景色后控制圖片的顯示就好了。過(guò)程肯定是需要通過(guò)定時(shí)器來(lái)控制的，而且顯示的地方位置是隨機(jī)的，也就是我們也需要Math.random方法，我們通過(guò)不斷的splice來(lái)獲取數(shù)組的個(gè)體，也避免了會(huì)拿到重復(fù)的個(gè)體，代碼如下：

const colorTimer = setInterval(() => {
  const length = textArr.length;
  const showNumber = textArr.splice(Math.random() * length, 1);
  spanEles[showNumber].style.backgroundColor = "#F40";
  iEles[showNumber].style.left = "100%";
  if (!textArr.length) {
    clearInterval(colorTimer);
    showImg();
  }
}, 25);

當(dāng)背景色全部改變完成以后，我們就需要啟動(dòng)圖片的定時(shí)器，同理圖片的src也是隨機(jī)的：

const showImg = () => {
  const imgTimer = setInterval(() => {
    const length = imgArr.length;
    const [showNumber] = imgArr.splice(Math.random() * length, 1);
    const [imgIndex] = imgSrc.splice(Math.random() * imgSrc.length, 1);
    
    imgEles[showNumber].src = imgList[imgIndex];
    imgEles[showNumber].style.display = "inline";
    spanEles[showNumber].style.backgroundColor = "#fff";
    iEles[showNumber].style.left = "-100%";

    if (!imgArr.length) {
      spanEles[showNumber].classList.add("you");
      clearInterval(imgTimer);
    }
  }, 25);
}

當(dāng)圖片到最后一張的時(shí)候顯示‘You’。

完成效果

因?yàn)槲覍?shí)在是不想找那么多圖片，大概只拷貝了十份，然后乘以3，所以會(huì)出現(xiàn)一個(gè)頭像重復(fù)三次的情況,源碼。一次小小的嘗試，覺(jué)得挺有意思，感謝能看完的你～