JavaScript implements waterfall flow and loading effects

This article mainly introduces the relevant information of JavaScript to implement waterfall flow and loading effect in detail. It has certain reference value. Interested friends can refer to it

1. Waterfall What is flow?

Waterfall flow is a relatively popular website page layout. The visual performance is an uneven multi-column layout. As the page scroll bar scrolls down, this layout will continue to load data. block and append to the current tail.

The earliest website to adopt waterfall flow layout was Pinterest, which gradually became popular in China. For example, we are familiar with the layout of Baidu pictures. "A long time ago", Baidu pictures still needed to be clicked page by page to view. More pictures, and the current waterfall layout makes it easier for users to find pictures.

2. Advantages and disadvantages of waterfall flow

##Advantages:

1. Saves space on the page and no longer requires navigation and page number buttons.

2. Enhance the user experience, so that the user experience is more about browsing pictures, rather than finding how to find the next page and switching operations.

Disadvantages:

1. Limited types of web pages used:

This waterfall flow layout is only suitable for certain A portion of a specific type of content within a specific type of product.

For example, when we buy something on a certain treasure, we need to remember which product on which page we want to buy, and then go back to buy it. At this time, we need our page buttons to help remember, waterfall Flow is more troublesome.

2. The footer that will never be seen:

If we use the waterfall infinite scroll loading mode, that means we will never be able to see our footer when the user repeats it again and again If you browse to the bottom of the page and see the footer, but because of the sudden appearance of automatically loaded content, you cannot click on the link in the footer or log in, then the user experience is extremely bad, and they may be angry. Shut down your web page.

3. About the number of pages:

For users, it is actually very convenient to use waterfall flow automatic loading to replace traditional page changes, but for developers’ websites, pages The reduction may make it impossible to display more relevant information. The most obvious one is the reduction of advertisements.

3. How to write waterfall flow and its principle

What does waterfall flow look like? Let’s write a simple waterfall flow layout now. First, let’s sort out the messy basic styles and layouts~ In order to save space, we will not indent here~

CSS:

*{margin: 0;padding: 0;}  
#wrap{width: 840px;margin: 0 auto;border: 1px solid black;overflow: hidden;}
#wrap ul{width: 200px;margin: 0 5px;float: left;}
#wrap ul li{width: 200px;list-style: none;margin: 10px 0;background: palegreen;font-size: 50px;color: white;text-align: center;}

HTML:

<p id="wrap">
  <ul></ul>
  <ul></ul>
  <ul></ul>
  <ul></ul>
</p>

The following is a simple JS code:

var wrap=document.querySelector("#wrap");
var ul=document.querySelectorAll("#wrap ul");//声明元素块
//先创建一个随机数的函数
function ranDom(min,max){
  return Math.random()*(max-min+1)+min;
}
//再创建一个添加li的函数
function createLi(num){
  for(var i=0;i<num;i++){
    var newLi=document.createElement("li");//创建li
    newLi.style.height=ranDom(100,400)+"px";//使用随机数函数创建高度不同的li
    var arrul=[];
//将ul的高度进行储存和比较
    for(var j=0;j<ul.length;j++){
      arrul.push(ul[j].offsetHeight);//储存ul的高度
    }
    var minHeight=arrul[0];
    var minIndex=0;
    for(var k=0;k<arrul.length;k++){
      if(minHeight>arrul[k]){
        minHeight=arrul[k];//比较出高度最短的ul然后赋值给minHeight
        minIndex=k;//把高度最短的ul所在下标赋值给minIndex
      }
    }
  ul[minIndex].appendChild(newLi);//向高度最短的ul里添加li
  }  
}
createLi(15);//执行函数，添加15个li，
//创建一个滚动事件
window.onscroll=function(){ 
// html总高度-可视化窗口高度=body的滚动高度
//兼容写法 
  var scrollTop=document.body.scrollTop; 
  var clientHeight=document.documentElement.clientHeight||document.body.clientHeight||window.innerHeight; 
  if(document.documentElement.offsetHeight-clientHeight<=scrollTop){ 
    createLi(15); 
  } 
}
//当滚动快要到达底部,还没有到达的时候,再去执行函数,创建新的li

Like this We have implemented an automatic loading waterfall flow layout that never sees the footer.

4. Summary

Simply speaking, waterfall flow is the uneven content added between multiple containers with variable heights in the page container. When the mouse scrolls, Continuously load data at the end of the container, and automatically load it to the vacant position, which is the position with the shortest height in the example, and cycle continuously.

Waterfall flow is efficient and attractive for displaying pictures. The quick reading mode where users scan at a glance can obtain more information in a short time, while automatic loading in waterfall flow avoids Page turning operation by user mouse click.

The main characteristic of the waterfall flow is that it is well-proportioned. The design of fixed width but not fixed height makes the page different from the traditional matrix image layout mode. It cleverly uses visual hierarchy, and the random flow of sight relieves visual fatigue. , while giving people an eclectic feel.

The above is the entire content of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support the PHP Chinese website.

For more articles related to JavaScript implementation of waterfall flow and loading effects, please pay attention to the PHP Chinese website!