ES6切换图片项目完整点击切换逻辑

  Img.prototype._bind = function() {

      methods.$('.__Img__classify' , this.wrap).addEventListener('click',({target}) =>{
        if(target.nodeName !== 'LI') return;

        const type = target.innerText
        const els = this._getImgsByType(type)  //els是将要显示的图片集合    
        
        let prevImgs = this.figures.map(figure =>methods.$('img',figure).src) //找出当前每个fugure中包含的图片的src

        
        let nextImgs = els.map(figure => methods.$('img',figure).src)


        const diffArr = this._diff(prevImgs,nextImgs)

        diffArr.forEach(([,i2]) =>{
          this.figures.every((figure,index) => {
            let src = methods.$('img', figure).src
            
            if(src === nextImgs[i2]){  //去掉相同项
              console.log("Img.prototype._bind -> nextImgs[i2]", i2)  
              this.figures.splice(index,1)
              
              return false
            }
            return true
          })
        })
        this._calcPosition(els)

        let needAppendEls = []
        if(diffArr.length){
          let nextElsIndex = diffArr.map(([,i2]) => i2);
          els.forEach((figure,index)=>{
            if(!nextElsIndex.includes(index))
              
              needAppendEls.push(figure)
            
          })
        }else{
          needAppendEls = els
        }

        this.figures.forEach(el =>{ //将原有图片隐藏
          el.style.transform = 'scale(0,0) translate(0%,100%)'
          el.style.opacity = '0'
        })

        methods.appendChild(this.imgContainer, ...needAppendEls)

        setTimeout(() =>{ //展示图片
          els.forEach(figure =>{
            figure.style.transform = 'scale(1,1) translate(0,0)'
            figure.style.opacity = '1'
          })
        })

        setTimeout(() =>{
          this.figures.forEach(figure =>{
            this.imgContainer.removeChild(figure)
          })
          this.figures = els
        },600)

      })
    }

从上往下，首先得到els(通过type所得的下个类别里的所有图片)
然后再方法内定义previmgs和nextimgs,分别是当前和之后图片里的所有src，this.figures的方法妹在这里写，但已经定义好，内容是当前页面所有的图片

对比previmgs和nextimgs,得到diffarr数组，数组下标后面的i2是代表着相同图片的下标，将现有图片和将要出来的图片中重复的给裁减掉
然后通过_calposition方法预先给将要出来的所有图片布置位置
然后将将之后要出来的图片的下标导出成数组，删掉重复项

然后隐藏原有图片，排列新的图片，展示动画效果，销毁有原图片