摘要：每一個方格就是數組的一個個體。收工完成效果因為我實在是不想找那么多圖片，大概只拷貝了十份，然后乘以，所以會出現一個頭像重復三次的情況源碼。

在看淘寶前端團隊的博客的時候，無意中點進了關于我們這個頁面，其中有個動畫我覺得很有趣，也很通用，感覺在哪里都可以使用一樣，效果如下圖所示：

每次刷新的頭像和‘You’的位置都是不同的，說實話，我覺得蠻有意思的，于是我自己嘗試去實現了一下。
下面我會從我的角度去分析實現這樣的效果，因為我不知道FED他們是怎么實現的

先分析下小方塊的結構，就是：

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

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

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

啊？你問我上面的span是怎么弄的，我靠，我當然是手慢慢敲的的啊

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

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

我們打開網頁：

這是個什么玩意？
好吧，不開玩喜了，我們舉個例子吧，現在我想創建一個長度為十，數組成員都是相應下標的數組，應該怎么辦？

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

打住，正確的姿勢是這樣的：

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

當然你還可以使用遞歸的方式，我本人來說，一直使用第一種，感覺比較好用，我們重新實現下：

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渲染到頁面，緊接著是找出我們要渲染字符的位置了：

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兩種需要做處理的元素，所以我們需要兩組數組，淺復制就好了：

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

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

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);

當背景色全部改變完成以后，我們就需要啟動圖片的定時器，同理圖片的src也是隨機的：

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);
}

當圖片到最后一張的時候顯示‘You’。

完成效果

因為我實在是不想找那么多圖片，大概只拷貝了十份，然后乘以3，所以會出現一個頭像重復三次的情況,源碼。一次小小的嘗試，覺得挺有意思，感謝能看完的你～