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