JS code to implement waterfall flow plug-in-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

JS code to implement waterfall flow plug-in

小云云

Feb 07, 2018 am 09:25 AM

javascript plug-in

The pictures in the waterfall flow layout have a core feature—equal width and variable height. The waterfall flow layout is used to a certain extent on domestic websites, such as pinterest, petal.com, etc. This article mainly analyzes in detail a native JS waterfall flow plug-in and code-related explanations. Readers who are interested in this can refer to it and study it. I hope it can help everyone.

Basic function implementation

First we define a container with 20 pictures,

<body>
 <style>
  #waterfall {
   position: relative;
  }
  .waterfall-box {
   float: left;
   width: 200px;
  }
 </style>
</body>
<p id="waterfall">
  <img src="images/1.png" class="waterfall-box">
  <img src="images/2.png" class="waterfall-box">
  <img src="images/3.png" class="waterfall-box">
  <img src="images/4.png" class="waterfall-box">
  <img src="images/5.png" class="waterfall-box">
  <img src="images/6.png" class="waterfall-box">
  ...
 </p>
由于未知的 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 = &#39;absolute&#39; // 核心语句
  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)
 }
}

Copy after login

Careful Friends may have discovered that the

offsetHeight attribute is used in the code to obtain the height of the image. The sum of the heights of this attribute is equal to image height + padding + border. Because of this, we Use padding instead of margin to set the distance between pictures. In addition to the offsetHeight attribute, you must also understand the differences between offsetHeight, clientHeight, offsetTop, scrollTop and other attributes. , in order to better understand this project. The css code is as simple as:

.waterfall-box {
 float: left;
 width: 200px;
 padding-left: 10px;
 padding-bottom: 10px;
}

Copy after login

Scroll, resize event monitoring implementation

After the initialization function init is implemented, the next step is It is necessary to monitor the scroll event, so that when the scroll reaches the bottom of the parent node, a steady stream of pictures will be loaded. One point to consider at this time is, at what position is the loading function triggered when scrolling? This varies from person to person. My approach is to trigger the loading function when the condition

Height of parent container + scrolling distance > offsetTop of the last picture is met, that is, orange line + purple line > blue line , the code is as follows:

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(&#39;img&#39;)
   img.setAttribute(&#39;src&#39;, `images/${i+1}.png`)
   img.setAttribute(&#39;class&#39;, &#39;waterfall-box&#39;)
   fragment.appendChild(img)
  }
  $waterfall.appendChild(fragment)
 }
}

Copy after login

Because the parent node may customize the node, an encapsulation of the monitoring scroll function is provided. The code is as follows:

proto.bind = function () {
  const bindScrollElem = document.getElementById(this.opts.scrollElem)
  util.addEventListener(bindScrollElem || window, &#39;scroll&#39;, scroll.bind(this))
 }
 const util = {
  addEventListener: function (elem, evName, func) {
   elem.addEventListener(evName, func, false)
  },
 }

Copy after login

Resize event monitoring is similar to scroll event monitoring. When the resize function is triggered, just call the init function to reset.

Use the publish-subscribe model and inheritance to implement listening binding

Since the goal is to develop plug-ins, we cannot just be satisfied with the realization of functions, but also leave corresponding operating space for developers to do it themselves deal with. Reminiscing about the drop-down loading of pictures in waterfall flows in business scenarios, they are usually obtained asynchronously through Ajax, so the loaded data must not be hard-coded in the library. It is expected that the following calls can be implemented (the usage of waterfall is used here for reference),

const waterfall = new Waterfall({options})
waterfall.on("load", function () {
 // 此处进行 ajax 同步/异步添加图片
})

Copy after login

Observing the calling method, it is not difficult to think of using the publish/subscribe model to implement it. Regarding the publish/subscribe model, it was introduced before in Node.js Asynchronous Async Record. The core idea is to add the function to the cache through the subscription function, and then implement the asynchronous call through the publishing function. The code implementation is given below:

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) // 调用事件监听器
 }
}

Copy after login

Next, let Waterfall To use the publish/subscribe mode, you only need to let Waterfall inherit the eventEmitter function. The code is implemented as follows:

function Waterfall(options = {}) {
 eventEmitter.call(this)
 this.init(options) // 这个 this 是 new 的时候，绑上去的
}
Waterfall.prototype = Object.create(eventEmitter.prototype)
Waterfall.prototype.constructor = Waterfall

Copy after login

The inheritance method absorbs constructor-based inheritance and prototype chain-based inheritance. The advantages of the two writing methods, as well as the use of

Object.create to isolate the subclass and the parent class. For more details on inheritance, you can write another article. I will stop here.

Small optimization

In order to prevent the scroll event from triggering multiple loading of images, you can consider using function anti-shake and throttling. Based on the publish-subscribe model, an isLoading parameter is defined to indicate whether it is loading, and whether to load is determined based on its Boolean value. The code is as follows:

let isLoading = false
const scroll = function () {
 if (isLoading) return false // 避免一次触发事件多次
 if (scrollPX + bsHeight > imgList[imgList.length - 1].offsetTop) { // 浏览器高度 + 滚动距离 > 最后一张图片的 offsetTop
  isLoading = true
  this.emit(&#39;load&#39;)
 }
}
proto.done = function () {
 this.on(&#39;done&#39;, function () {
  isLoading = false
  ...
 })
 this.emit(&#39;done&#39;)
}

Copy after login

This When calling, you need to add

waterfall.done to inform you that the current image has been loaded. The code is as follows:

const waterfall = new Waterfall({})
waterfall.on("load", function () {
 // 异步/同步加载图片
 waterfall.done()
})

Copy after login

Related recommendations:

Detailed explanation on the use of pure native JS waterfall flow plug-in Macy.js

Introduction to the use of Jquery waterfall flow plug-in_jquery

jQuery waterfall flow plug-in Wookmark usage example_jquery

The above is the detailed content of JS code to implement waterfall flow plug-in. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

2 weeks ago By DDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: How To Unlock Everything In MyRise

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7467

CakePHP Tutorial

1376

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers

Related knowledge

PyCharm Beginner's Guide: Comprehensive understanding of plug-in installation! Feb 25, 2024 pm 11:57 PM

PyCharm is a powerful and popular Python integrated development environment (IDE) that provides a wealth of functions and tools so that developers can write code more efficiently. The plug-in mechanism of PyCharm is a powerful tool for extending its functions. By installing different plug-ins, various functions and customized features can be added to PyCharm. Therefore, it is crucial for newbies to PyCharm to understand and be proficient in installing plug-ins. This article will give you a detailed introduction to the complete installation of PyCharm plug-in.

Error loading plugin in Illustrator [Fixed] Feb 19, 2024 pm 12:00 PM

When launching Adobe Illustrator, does a message about an error loading the plug-in pop up? Some Illustrator users have encountered this error when opening the application. The message is followed by a list of problematic plugins. This error message indicates that there is a problem with the installed plug-in, but it may also be caused by other reasons such as a damaged Visual C++ DLL file or a damaged preference file. If you encounter this error, we will guide you in this article to fix the problem, so continue reading below. Error loading plug-in in Illustrator If you receive an "Error loading plug-in" error message when trying to launch Adobe Illustrator, you can use the following: As an administrator

What is the Chrome plug-in extension installation directory? Mar 08, 2024 am 08:55 AM

What is the Chrome plug-in extension installation directory? Under normal circumstances, the default installation directory of Chrome plug-in extensions is as follows: 1. The default installation directory location of chrome plug-ins in windowsxp: C:\DocumentsandSettings\username\LocalSettings\ApplicationData\Google\Chrome\UserData\Default\Extensions2. chrome in windows7 The default installation directory location of the plug-in: C:\Users\username\AppData\Local\Google\Chrome\User

Share three solutions to why Edge browser does not support this plug-in Mar 13, 2024 pm 04:34 PM

When users use the Edge browser, they may add some plug-ins to meet more of their needs. But when adding a plug-in, it shows that this plug-in is not supported. How to solve this problem? Today, the editor will share with you three solutions. Come and try it. Method 1: Try using another browser. Method 2: The Flash Player on the browser may be out of date or missing, causing the plug-in to be unsupported. You can download the latest version from the official website. Method 3: Press the "Ctrl+Shift+Delete" keys at the same time. Click "Clear Data" and reopen the browser.

WebSocket and JavaScript: key technologies for implementing real-time monitoring systems Dec 17, 2023 pm 05:30 PM

WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology

Does PyCharm Community Edition support enough plugins? Feb 20, 2024 pm 04:42 PM

Does PyCharm Community Edition support enough plugins? Need specific code examples As the Python language becomes more and more widely used in the field of software development, PyCharm, as a professional Python integrated development environment (IDE), is favored by developers. PyCharm is divided into two versions: professional version and community version. The community version is provided for free, but its plug-in support is limited compared to the professional version. So the question is, does PyCharm Community Edition support enough plug-ins? This article will use specific code examples to

Detailed explanation of how to install and set up the EclipseSVN plug-in Jan 28, 2024 am 08:42 AM

Detailed explanation of how to install and set up the EclipseSVN plug-in Eclipse is a widely used integrated development environment (IDE) that supports many different plug-ins to extend its functionality. One of them is the EclipseSVN plugin, which enables developers to interact with the Subversion version control system. This article will detail how to install and set up the EclipseSVN plug-in and provide specific code examples. Step 1: Install the EclipseSVN plug-in and open Eclipse

PyCharm plug-in installation tips are shared to help you get twice the result with half the effort! Feb 21, 2024 pm 06:36 PM

PyCharm is a powerful Python integrated development environment. By installing plug-ins, you can further improve development efficiency and facilitate developers' work. This article will share some tips on PyCharm plug-in installation, so that you can get twice the result with half the effort, while also providing specific code examples to demonstrate how to use the plug-in. Step 1: Open PyCharm, click "File" in the menu bar, and then select "Settings". Step 2: In the Settings window, click "

See all articles