效果图
demo.html
<!DOCTYPE html> <html lang="en"> head> Meta charset="UTF-8"title>Document</bodyscript type="text/javascript"> let arr = ["前端,jqueryjavascripthtmlcss]; //补充代码 let lis''; let ul document.createElement('ul); function appendHTML( ...innerhtml){ innerhtml.forEach(el => { let templates `<li`+el/li>`; lis+=templates; }); return lis; } appendHTML(...arr); ul.innerHTMLlis; document.body.appendChild(ul); scripthtml>
style.css
* { margin: 0; padding: 0; } body { background: #fafafa; url('../images/bg.png') } ::-webkit-scrollbar { display: none; } #wrap { width: 1065px; padding-top: 50px; 0 auto; 30px; rgb(255,255); border-radius: 2px; margin-top: 100px; } /* 整体容器 */ .__Img__container { font-size: 10px; } 分类容器 .__Img__container .__Img__classify { text-align: center; */ } 分类按钮 .__Img__container .__Img__classify .__Img__classify__type-btn { inline-block; .2em 1em; 1.6em; margin-right: 10px; cursor: pointer; border: 1px solid #e95a44; outline: none; color: #e95a44; transition: all .4s; user-select: 2px; } 激活状态的分类按钮 .__Img__container .__Img__classify .__Img__classify__type-btn.__Img__type-btn-active { #e95a44; border: 1px solid #9b59b6; */ #fff; } 所有图片容器 .__Img__container .__Img__img-container { position: relative; 1005px; flex; flex-wrap: wrap; all .6s cubic-bezier(0.77,0.175,1); } 单个图片容器 .__Img__container .__Img__img-container figure { 240px; height: 140px; absolute; transform: scale(0,0); opacity: overflow: hidden; none; } 伪元素遮罩层 .__Img__container .__Img__img-container figure::before { block; 100%; top: left: z-index: 4; rgba(58,12,5,0.5); content: ' '; all .3s; pointer; } 图片 .__Img__container .__Img__img-container figure img { all .3s; } 图片标题 .__Img__container .__Img__img-container figure figcaption { 50%; 7; 1.5em; translate(-50%,-50%); text-align: center; 悬停图片的时候标题显示 .__Img__container .__Img__img-container figure:hover figcaption { 1; } .__Img__container .__Img__img-container figure:hover img { scale(1.1,1.1); } 悬停图片的时候遮罩显示 .__Img__container .__Img__img-container figure:hover::before { .__Img__overlay { fixed; right: bottom: background-color: rgba(0,.8); justify-content: align-items: .__Img__overlay .__Img__overlay-prev-btn,.__Img__overlay .__Img__overlay-next-btn { 2px solid white; line-height: white; 2rem; pointer; } .__Img__overlay .__Img__overlay-prev-btn { 20px; } .__Img__overlay .__Img__overlay-next-btn { .__Img__overlay .__Img__overlay-prev-btn:active,.__Img__overlay .__Img__overlay-next-btn:active { rgb(241,241,.4); } .__Img__overlay .__Img__overlay-next-btn::after { "N"; } .__Img__overlay .__Img__overlay-prev-btn::after { "P"; } .__Img__overlay img { scale(2,2); }
index.js
// 1. 对图片进行分类 // 2. 生成dom元素 3. 绑定事件 4. 显示到页面上 以插件形式完成 (function (window,document) { let canChange = true; let curPreviewImgIndex = 0; 公共方法集合 const methods = { 以数组形式添加子元素 appendChild(parent,...children) { children.forEach(el => { parent.appendChild(el); }); }, 选择器 $(selector,root = document) { return root.querySelector(selector); },1)"> 选择多个元素 $$(selector,1)"> root.querySelectorAll(selector); } }; 构造函数 let Img = (options) { 初始化 this._init(options); 生成DOM元素 ._createElement(); 绑定事件 ._bind(); 显示到页面上 ._show(); } 初始化 Img.prototype._init = ({ data,initType,parasitifer }) { this.types = ['全部']; 所有的分类 this.all = []; 所有图片元素 this.classified = {'全部': []}; 按照类型分类后的图片 this.curType = initType; 当前显示的图片分类 this.parasitifer = methods.$(parasitifer); 挂载点 this.imgContainer = null; 所有图片的容器 this.wrap = 整体容器 this.typeBtnEls = 所有分类按钮组成的数组 this.figures = 所有当前显示的图片组成的数组 对图片进行分类 ._classify(data); console.log(this.classified);//分类的结果 }; 对图片进行分类 Img.prototype._classify = (data) { let srcs = []; 解构赋值，获取每张图片的四个信息 data.forEach(({ title,type,alt,src }) => { 如果分类中没有当前图片的分类，则在全部分类的数组中新增该分类 if (!.types.includes(type)) { .types.push(type); } 判断按照类型分类后的图片中有没有当前类型 if (!Object.keys(.classified).includes(type)) { this.classified[type] = []; } 判断当前图片是否已生成 srcs.includes(src)) { 如果图片没有生成过，则生成图片，并添加到对应的分类中 srcs.push(src); let figure = document.createElement('figure'); let img = document.createElement('img'); let figcaption = document.createElement('figcaption'); img.src = src; img.setAttribute('alt' title; 在figure中添加img和figcaption methods.appendChild(figure,img,figcaption); 将生成的figure添加到all数组中 .all.push(figure); 新增的这个图片会在all数组中的最后一个元素 this.classified[type].push(this.all.length - 1); } else { 去all中 找到对应的图片 添加到 对应的分类中 this.classified[type].push(srcs.findIndex(s1 => s1 === src)); } }); }; 根据分类获取图片 Img.prototype._getImgsByType = (type) { 如果分类是全部，就返回所有图片 否则，通过map进行遍历，根据分类来获取图片数组 return type === '全部' ? [...this.all] : this.classified[type].map(index => .all[index]); }; 生成DOM Img.prototype._createElement = () { 创建分类按钮 let typesBtn = 遍历分类数组 for (let type of .types.values()) { typesBtn.push(` <li class="__Img__classify__type-btn${ type === this.curType ? ' __Img__type-btn-active' : '' }">${ type }</li> `); } console.log(typesBtn);//查看所有分类按钮 整体的模版 let tamplate = ` <ul class="__Img__classify"> ${ typesBtn.join('') } </ul> <div class="__Img__img-container"></div> `; let wrap = document.createElement('div'); wrap.className = '__Img__container'; wrap.innerHTML = tamplate;生成整体元素 取得所有图片的容器 this.imgContainer = methods.$('.__Img__img-container'查看当前分类下的图片 console.log(this._getImgsByType(.curType)); 把当前分类下的图片数组，插入到图片容器里 methods.appendChild(this.imgContainer,....curType)); 把可能有用的数据先挂到指定位置 this.wrap = wrap; this.typeBtnEls = [...methods.$$('.__Img__classify__type-btn'this.figures = [...methods.$$('figure' 遮罩层 let overlay = document.createElement('div'); overlay.className = '__Img__overlay'; overlay.innerHTML = ` <div class="__Img__overlay-prev-btn"></div> <div class="__Img__overlay-next-btn"></div> <img src="" alt=""> `; 把遮罩层添加到图片墙中 methods.appendChild(.wrap,overlay); this.overlay = overlay; 当前要预览的图片 this.previewImg = methods.$('img' 移动每张图片到合适的位置 this._calcPosition(.figures); }; 获取上一次显示的图片和下一次显示的图片中，相同的图片下标（映射关系） Img.prototype._diff = (prevImgs,nextImgs) { let diffArr = [];保存两次中相同的数据的下标 遍历前一次的所有图片 如果在下一次中存在相同的，则获取下标index2 prevImgs.forEach((src1,index1) => { let index2 = nextImgs.findIndex(src2 => src1 === src2); if (index2 !== -1) { 在这个映射数组中存入下标 diffArr.push([index1,index2]); } }); diffArr; }; 绑定事件 Img.prototype._bind = 事件代理，点击事件绑定在ul上 methods.$('.__Img__classify',this.wrap).addEventListener('click',({ target }) => { if (target.nodeName !== 'LI') ; if (!canChange) ; canChange = false; const type = target.innerText;获取按钮上的文字（图片类型） const els = this._getImgsByType(type);获取对应类型的图片 let prevImgs = this.figures.map(figure => methods.$('img',figure).src);上一次显示的图片数组 let nextImgs = els.map(figure => methods.$('img',1)">下一次显示的图片数组 const diffArr = this._diff(prevImgs,nextImgs);获取两次相同图片的映射关系（下标） diffArr.forEach(([,i2]) => { 对下一次的所有图片进行遍历 this.figures.every((figure,index) => { let src = methods.$('img' 如果下一次的图片在这一次中已经出现过 if (src === nextImgs[i2]) { 则从所有图片数组中剔除该图片（从Index位置，裁剪1个） this.figures.splice(index,1); return ; } ; }); }); 计算图片位置 ._calcPosition(els); let needAppendEls = []; if (diffArr.length) { 如果存在相同图片 let nextElsIndex = diffArr.map(([,i2]) => i2); els.forEach((figure,index) => { 如果该图片没有出现过，则需要插入 nextElsIndex.includes(index)) needAppendEls.push(figure); }); } 如果不存在相同图片 needAppendEls = els;需要插入的图片=所有图片 } 上一次的图片全部隐藏掉 this.figures.forEach(el => { el.style.transform = 'scale(0,0) translate(0%,100%)'; el.style.opacity = '0'; }); 把下一次需要显示的图片添加到图片容器中 methods.appendChild(.imgContainer,...needAppendEls); 设置下一次显示的动画 setTimeout(() => els表示所有图片，包括新增的，和上一次已经显示过的 els.forEach(el => { el.style.transform = 'scale(1,1) translate(0,0)'; el.style.opacity = '1'; }); }); 从DOM中销毁上一次出现的图片，将图片数组转为下一次要现实的图片 setTimeout(() =>this.figures.forEach(figure =>.imgContainer.removeChild(figure); }); this.figures = els; canChange = ; 保证在一次切换动画没有完成之前，拒绝进行下一次切换 避免快速切换 },600); 给图片按钮添加切换时的动画效果 this.typeBtnEls.forEach(btn => (btn.className = '__Img__classify__type-btn')); target.className = '__Img__classify__type-btn __Img__type-btn-active'; }); 事件代理实现点击图片的效果 this.imgContainer.addEventListener('click',1)"> 如果点击的不是图片或者图片描述，则返回 if (target.nodeName !== 'FIGURE' && target.nodeName !== 'FIGCAPTION') 如果点击的是图片的描述 则把target转为其父元素图片 if (target.nodeName === 'FIGCAPTION') { target = target.parentNode; } const src = methods.$('img' 拿到当前图片索引 curPreviewImgIndex = this.figures.findIndex(figure => src === methods.$('img'this.previewImg.src = src;把当前图片的src属性赋值给预览图 this.overlay.style.display = 'flex';设置遮罩层布局显示 setTimeout(() =>this.overlay.style.opacity = '1';设置遮罩层显示 }); }); 预览时点击遮罩层，实现预览退出 this.overlay.addEventListener('click',() =>this.overlay.style.opacity = '0'; 箭头函数可以保留最初的this指向 setTimeout(() =>this.overlay.style.display = 'none'; },300); }); 预览点击切换上一张 methods.$('.__Img__overlay-prev-btn',1)">this.overlay).addEventListener('click',e => { e.stopPropagation();阻止事件冒泡 如果是第一张，上一张就是最后一张 curPreviewImgIndex = curPreviewImgIndex === 0 ? this.figures.length - 1 : curPreviewImgIndex - 1 获取到需要上一张显示的图片的src，赋值给预览图的src this.previewImg.src = methods.$('img',1)">.figures[curPreviewImgIndex]).src; }); 预览点击切换下一张 methods.$('.__Img__overlay-next-btn',1)"> { e.stopPropagation(); 如果是最后一张，下一张就是第一张 curPreviewImgIndex = curPreviewImgIndex === this.figures.length - 1 ? 0 : curPreviewImgIndex + 1.figures[curPreviewImgIndex]).src; }); }; 显示元素 Img.prototype._show = () { methods.appendChild(this.parasitifer,1)">.wrap); 设置出现的动画效果 setTimeout(() => { figure.style.transform = 'scale(1,1)">; figure.style.opacity = '1'; }); }); }; 计算每张图片所占的位置 Img.prototype._calcPosition = (figures) { let horizontalImgIndex = 0; figures.forEach((figure,1)"> { figure.style.top = parseInt(index / 4) * 140 + parseInt(index / 4) * 15 + 'px'; figure.style.left = horizontalImgIndex * 240 + horizontalImgIndex * 15 + 'px'; figure.style.transform = 'scale(0,0) translate(0,-100%)'; horizontalImgIndex = (horizontalImgIndex + 1) % 4; }); let len = Math.ceil(figures.length / 4);总行数 this.imgContainer.style.height = len * 140 + (len - 1) * 15 + 'px';解决绝对定位造成的父容器高度塌陷的问题 把生成的图片墙挂到全局 window.$Img = Img; })(window,document);
data.js
