JavaScript implements waterfall stream and loading effect

This article mainly introduces in detail the information about JavaScript waterfall stream implementation and loading effect, which has a certain reference value, interested friends can refer to this article for details about the JavaScript waterfall stream implementation and loading effect, which has a certain reference value, for more information, see

1. What is waterfall stream?

Waterfall stream is a popular website page layout. Its visual performance is uneven multi-column layout. As the page scroll down, this layout constantly loads data blocks and attaches them to the current tail.

Pinterest was the first website to adopt waterfall stream layout, which gradually became popular in China. For example, the layout of Baidu images that we knew well was a long time ago, baidu images still need to be clicked on one page to view more images. The current waterfall flow layout makes it easier for users to search for images.

Ii. Advantages and Disadvantages of waterfall stream

Advantages:

1. Saves page space and does not need navigation or page number buttons.

2. Enhance the user experience, so that the user experience is more about browsing images, rather than looking for operations on how to find the next page and switch.

Disadvantages:

1. Limited webpage types:

This waterfall flow layout is only applicable to some specific types of content in certain types of products.

For example, when we buy things in a certain treasure, we need to remember which item on the page we want to buy and then purchase it again. At this time, we need the page buttons to help us remember, waterfall flow is more troublesome.

2. Invisible footer:

If we use the waterfall stream infinite rolling loading mode, we will never be able to see our footer. When users browse to the bottom of the page again and again, they will see the footer, however, because of the sudden appearance of automatically loaded content, users cannot click the link in the footer or log on, so the user experience is extremely bad, they may turn off your webpage angrily.

3. Page quantity:

For users, it is very convenient to use waterfall stream auto loading to replace the traditional page feed. For developers' websites, the reduction of pages may not be able to display more relevant information, the most obvious difference is the decrease in advertising.

Iii. waterfall stream writing and principles

What is the waterfall flow like? Now let's write a simple waterfall flow layout. First, let's just tap into the messy basic style and layout ~ We will not indent it to save space ~

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:

The following is a simple JS Code:

Var wrap = document. querySelector ("# wrap"); var ul = document. querySelectorAll ("# wrap ul"); // declare the element block // create a ranDom number first function: ranDom (min, max) {return Math. random () * (max-min + 1) + min;} // create a function createLi (num) {for (var I = 0; I
 
  

  
In this way, we can automatically load the waterfall stream layout without seeing the footer.
  
Iv. Summary
  
The waterfall stream is simply an uneven addition of content between multiple highly unfixed containers in the page container. Data is continuously loaded at the end of the container when you scroll the mouse, it is automatically loaded to the vacant position, that is, the shortest position in the example, and continues to loop.
  
Waterfall streams are efficient and attractive for image display. Users can get more information in a short period of time in a fast reading mode that has been swept away, the automatic loading in the waterfall stream avoids page turning by mouse clicks.
  
The main feature of waterfall flow is the incorrect layout. The wide and variable height design distinguishes pages from the traditional Matrix Image Layout mode. The clever use of the visual hierarchy reduces the visual fatigue by the arbitrary flow of sight, at the same time, it gives people the feeling of being informal.
  
The above is all the content of this article. I hope it will help you learn and support PHP.
  
For more articles about JavaScript Implementation of waterfall stream and loading effect, please refer to PHP Chinese network!