所有分类
  • 所有分类
  • 后端开发
原生 js 实现瀑布流插件及代码讲解,让你的网站更具吸引力

原生 js 实现瀑布流插件及代码讲解,让你的网站更具吸引力

本文主要和大家详细分析了一个原生js实现瀑布流插件以及代码相关讲解,对此有兴趣的读者们参考学习下吧,希望能帮助到大家。其核心思想即通过订阅函数将函数添加到缓存中,然后通过发布函数实现异步调用,下面给出其代码实现:函数,代码实现如下:事件触发

瀑布流,你听过没?不就是把图片或其它东西按照规则排列起来,看起来就像水流那样。这样能节省网页空间。我们今天就来学习怎么用纯正的JavaScript做个瀑布流插件,每句代码我都会详细解释给你听!

 
  #waterfall {
   position: relative;
  }
  .waterfall-box {
   float: left;
   width: 200px;
  }
 

原生 js 实现瀑布流插件及代码讲解,让你的网站更具吸引力 原生 js 实现瀑布流插件及代码讲解,让你的网站更具吸引力 原生 js 实现瀑布流插件及代码讲解,让你的网站更具吸引力 原生 js 实现瀑布流插件及代码讲解,让你的网站更具吸引力 原生 js 实现瀑布流插件及代码讲解,让你的网站更具吸引力 原生 js 实现瀑布流插件及代码讲解,让你的网站更具吸引力 ...

由于未知的 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

最后了,有没有小伙伴在安装瀑布流插件时遇到过难题?都是怎么搞定的?咱们来聊聊,顺便给我点赞!

原文链接:https://www.icz.com/technicalinformation/web/2024/07/19384.html,转载请注明出处~~~
0

评论0

请先
注意:请收藏好网址www.icz.com,防止失联!站内免费资源持续上传中…!赞助我们
显示验证码
没有账号?注册  忘记密码?