underscore.js

本次要实现的是一个照片墙的效果，如下图，很多图片随机的摆放在窗口中，当点击到某一张的时候，该张图片出现出现在窗口的水平垂直居中的位置。 首先，我们需要简单的结构处理图片，为了方便操作，引用了一个js库： underscore.js ，因为图片的数量是不固定的，这里我们采用动态添加的方式生成li，再在li里面添加图片。 <! DOCTYPE html > < html lang ="en" > < head > < meta charset ="UTF-8" > < title ></ title > < style > * { margin : 0 ; padding : 0 ; border : none ; list-style : none ; } html, body, ul { width : 100% ; height : 100% ; } #ps { position : relative ; } #ps li { width : 250px ; height : 360px ; box-shadow : 0 0 10px #000 ; } </ style > </ head > < body > < ul id ="ps" ></ ul > < script src ="js/Underscore-min.js" ></ script > < script >

js 的函数节流(throttle)和函数防抖(debounce)概述 函数防抖(debounce) 一个事件频繁触发，但是我们不想让他触发的这么频繁，于是我们就设置一个定时器让这个事件在 xxx 秒之后再执行。如果 xxx 秒内触发了，则清理定时器，重置等待事件 xxx 秒 比如在拖动 window 窗口进行 background 变色的操作的时候，如果不加限制的话，随便拖个来回会引起无限制的页面回流与重绘 或者在用户进行 input 输入的时候，对内容的验证放在用户停止输入的 300ms 后执行(当然这样不一定好，比如银行卡长度验证不能再输入过程中及时反馈) 一段代码实现窗口拖动变色 <script> let body = document.getElementsByTagName("body")[0]; let index = 0; if (body) { window.onresize = function() { index++; console.log("变色" + index + "次"); let num = [Math.ceil(Math.random() * 255), Math.ceil(Math.random() * 255), Math.ceil(Math.random() * 255)]; body.style.background = "rgb(" +