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方法预先给将要出来的所有图片布置位置
然后将将之后要出来的图片的下标导出成数组,删掉重复项
然后隐藏原有图片,排列新的图片,展示动画效果,销毁有原图片