瀑布流,你听过没?不就是把图片或其它东西按照规则排列起来,看起来就像水流那样。这样能节省网页空间。我们今天就来学习怎么用纯正的JavaScript做个瀑布流插件,每句代码我都会详细解释给你听!
#waterfall { position: relative; } .waterfall-box { float: left; width: 200px; }...
由于未知的 css 知识点,丝袜最长的妹子把下面的空间都占用掉了。。。 接着正文,假如如上图,每排有 5 列,那第 6 张图片应该出现前 5 张图片哪张的下面呢?当然是绝对定位到前 5 张图片高度最小的图片下方。 那第 7 张图片呢?这时候把第 6 张图片和在它上面的图片当作是一个整体后,思路和上述是一致的。代码实现如下: Waterfall.prototype.init = function () { ... const perNum = this.getPerNum() // 获取每排图片数 const perList = [] // 存储第一列的各图片的高度 for (let i = 0; i < perNum; i++) { perList.push(imgList[i].offsetHeight) } let pointer = this.getMinPointer(perList) // 求出当前最小高度的数组下标 for (let i = perNum; i < imgList.length; i++) { imgList[i].style.position = 'absolute' // 核心语句 imgList[i].style.left = `${imgList[pointer].offsetLeft}px` imgList[i].style.top = `${perList[pointer]}px` perList[pointer] = perList[pointer] + imgList[i].offsetHeight // 数组最小的值加上相应图片的高度 pointer = this.getMinPointer(perList) } }
第一步:初始化函数init的实现
给大家说说瀑布流插件怎么玩!首先咱们得有个名为“init”的函数,这个主要负责网页布局和准备要用的东西。比如说我们要做瀑布流这种,就要先把所有图片元素都拉出来,再算出每张图到底有多高。这时候就需要用到offsetHeight属性,它包括了图片的高度、内边距和边框。这样就能精确控制图片之间的距离了,而且还可以用padding代替margin来设置这些距离。
.waterfall-box { float: left; width: 200px; padding-left: 10px; padding-bottom: 10px; }
第二步:滚动事件的监听
搞定基础设定之后,我们开始处理滑鼠滚轮事件。你知道吗,如果用户不断下滑网页,图片会自动出现更多。具体啥时候该加载新图片?很简单,看父容器高度加滚动距离,只要大于最后一张图的offsetTop就可以。这样做能确保只有真的到底部时才开始加载图片,提高用户体验!
第三步:封装scroll监听函数
window.onscroll = function() { // ... if (scrollPX + bsHeight > imgList[imgList.length - 1].offsetTop) {// 浏览器高度 + 滚动距离 > 最后一张图片的 offsetTop const fragment = document.createDocumentFragment() for(let i = 0; i < 20; i++) { const img = document.createElement('img') img.setAttribute('src', `images/${i+1}.png`) img.setAttribute('class', 'waterfall-box') fragment.appendChild(img) } $waterfall.appendChild(fragment) } }
你知道吗?其实Node默认的东西不咋滴,不能帮咱们解决问题,所以咱们需要找个小帮手来处理滚动事件。这个小帮手能够帮咱们简化操作,想怎么绑定解除就怎么绑解除,让代码看着顺眼,插件也更灵活了!
第四步:使用发布-订阅模式
proto.bind = function () { const bindScrollElem = document.getElementById(this.opts.scrollElem) util.addEventListener(bindScrollElem || window, 'scroll', scroll.bind(this)) } const util = { addEventListener: function (elem, evName, func) { elem.addEventListener(evName, func, false) }, }
我们用发布-订阅模式搞定了图片异步加载~简单来说,就是把函数放在缓存里,然后通过发布函数在后台运行。这样就可以随心所欲地控制加载顺序和速度!
第五步:继承eventEmitter函数
要想用上瀑布流插件的发布-订阅功能,咱们就得照着eventEmitter函数来抄作业。首先,把构造函数跟原型链绑定到一块儿,然后用Object.create方法搞点区域划分,让子类和父类各过各的日子。这么一弄,代码看着顺眼,维护起来也省心不少!
const waterfall = new Waterfall({options}) waterfall.on("load", function () { // 此处进行 ajax 同步/异步添加图片 })
第六步:函数防抖与节流
别担心图片多了手机卡顿,咱们有”防抖”+”节流”两招就能解决!只需要设个isLoading变量看看是不是在加载中,然后按情况决定下一步行动。这样一来,就能省去不少不必要的网络请求,速度也会更快!
第七步:调用完成通知
记住,记得在瀑布流中加入%waterfall_done%这个参数,这会告诉插件所有图片已经加载完毕。这样一来,插件可以顺利执行后续操作,确保运行流畅不卡顿!
function eventEmitter() { this.sub = {} } eventEmitter.prototype.on = function (eventName, func) { // 订阅函数 if (!this.sub[eventName]) { this.sub[eventName] = [] } this.sub[eventName].push(func) // 添加事件监听器 } eventEmitter.prototype.emit = function (eventName) { // 发布函数 const argsList = Array.prototype.slice.call(arguments, 1) for (let i = 0, length = this.sub[eventName].length; i < length; i++) { this.sub[eventName][i].apply(this, argsList) // 调用事件监听器 } }
总结与展望
搞定!用JavaScript就能做个瀑布流小插件,还有基本的排版功能和发布-订阅模式,好修!希望这个分享能帮到你,如果你有什么新的点子或建议,就直接告诉我!
function Waterfall(options = {}) { eventEmitter.call(this) this.init(options) // 这个 this 是 new 的时候,绑上去的 } Waterfall.prototype = Object.create(eventEmitter.prototype) Waterfall.prototype.constructor = Waterfall
最后了,有没有小伙伴在安装瀑布流插件时遇到过难题?都是怎么搞定的?咱们来聊聊,顺便给我点赞!
评论0