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

javascriptplug-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  class="waterfall-box lazy"  src="/static/imghwm/default1.png"  data-src="images/1.png"    alt="JS code to implement waterfall flow plug-in" >
  <img  class="waterfall-box lazy"  src="/static/imghwm/default1.png"  data-src="images/2.png"    alt="JS code to implement waterfall flow plug-in" >
  <img  class="waterfall-box lazy"  src="/static/imghwm/default1.png"  data-src="images/3.png"    alt="JS code to implement waterfall flow plug-in" >
  <img  class="waterfall-box lazy"  src="/static/imghwm/default1.png"  data-src="images/4.png"    alt="JS code to implement waterfall flow plug-in" >
  <img  class="waterfall-box lazy"  src="/static/imghwm/default1.png"  data-src="images/5.png"    alt="JS code to implement waterfall flow plug-in" >
  <img  class="waterfall-box lazy"  src="/static/imghwm/default1.png"  data-src="images/6.png"    alt="JS code to implement waterfall flow plug-in" >
  ...
 </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)
 }
}

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;
}

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)
 }
}

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)
  },
 }

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 同步/异步添加图片
})

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

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

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;)
}

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()
})

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

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

HTML5: The Standard and its Impact on Web DevelopmentApr 27, 2025 am 12:12 AM

The core features of HTML5 include semantic tags, multimedia support, offline storage and local storage, and form enhancement. 1. Semantic tags such as, etc. to improve code readability and SEO effect. 2. Simplify multimedia embedding with labels. 3. Offline storage and local storage such as ApplicationCache and LocalStorage support network-free operation and data storage. 4. Form enhancement introduces new input types and verification properties to simplify processing and verification.

H5 Code Examples: Practical Applications and TutorialsApr 25, 2025 am 12:10 AM

H5 provides a variety of new features and functions, greatly enhancing the capabilities of front-end development. 1. Multimedia support: embed media through and elements, no plug-ins are required. 2. Canvas: Use elements to dynamically render 2D graphics and animations. 3. Local storage: implement persistent data storage through localStorage and sessionStorage to improve user experience.

The Connection Between H5 and HTML5: Similarities and DifferencesApr 24, 2025 am 12:01 AM

H5 and HTML5 are different concepts: HTML5 is a version of HTML, containing new elements and APIs; H5 is a mobile application development framework based on HTML5. HTML5 parses and renders code through the browser, while H5 applications need to run containers and interact with native code through JavaScript.

The Building Blocks of H5 Code: Key Elements and Their PurposeApr 23, 2025 am 12:09 AM

Key elements of HTML5 include,,,,,, etc., which are used to build modern web pages. 1. Define the head content, 2. Used to navigate the link, 3. Represent the content of independent articles, 4. Organize the page content, 5. Display the sidebar content, 6. Define the footer, these elements enhance the structure and functionality of the web page.

HTML5 and H5: Understanding the Common UsageApr 22, 2025 am 12:01 AM

There is no difference between HTML5 and H5, which is the abbreviation of HTML5. 1.HTML5 is the fifth version of HTML, which enhances the multimedia and interactive functions of web pages. 2.H5 is often used to refer to HTML5-based mobile web pages or applications, and is suitable for various mobile devices.

HTML5: The Building Blocks of the Modern Web (H5)Apr 21, 2025 am 12:05 AM

HTML5 is the latest version of the Hypertext Markup Language, standardized by W3C. HTML5 introduces new semantic tags, multimedia support and form enhancements, improving web structure, user experience and SEO effects. HTML5 introduces new semantic tags, such as, ,, etc., to make the web page structure clearer and the SEO effect better. HTML5 supports multimedia elements and no third-party plug-ins are required, improving user experience and loading speed. HTML5 enhances form functions and introduces new input types such as, etc., which improves user experience and form verification efficiency.

H5 Code: Writing Clean and Efficient HTML5Apr 20, 2025 am 12:06 AM

How to write clean and efficient HTML5 code? The answer is to avoid common mistakes by semanticizing tags, structured code, performance optimization and avoiding common mistakes. 1. Use semantic tags such as, etc. to improve code readability and SEO effect. 2. Keep the code structured and readable, using appropriate indentation and comments. 3. Optimize performance by reducing unnecessary tags, using CDN and compressing code. 4. Avoid common mistakes, such as the tag not closed, and ensure the validity of the code.

H5: How It Enhances User Experience on the WebApr 19, 2025 am 12:08 AM

H5 improves web user experience with multimedia support, offline storage and performance optimization. 1) Multimedia support: H5 and elements simplify development and improve user experience. 2) Offline storage: WebStorage and IndexedDB allow offline use to improve the experience. 3) Performance optimization: WebWorkers and elements optimize performance to reduce bandwidth consumption.

See all articles