First, what is waterfall flow?

Waterfall flow is a popular layout of web pages, which is visually presented as an uneven multi-column layout. As the page scroll bar scrolls down, the layout will continue to load data blocks and attach them to the current tail.

Pinterest, the first site to adopt waterfall flow layout, has gradually become popular in China, such as the layout of Baidu pictures, which we know well. Long ago, Baidu pictures still needed a page-by-page Click to view more pictures, but now the waterfall flow layout makes it more convenient for users to find pictures.

2. Advantages and disadvantages of waterfall flow

Advantages:

1. Save page space and no need for navigation and page number buttons.

2. Enhanced user experience, user experience is more about browsing pictures, rather than looking for how to find the next page and switch operations.

Disadvantages:

1. The types of web pages used are limited:

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

For example, when we buy something at a treasure, we need to remember which item on the first page we want to buy, and then go back to buy it. At this time, we need our page button to help memory, and the waterfall flow is more troublesome.

2. Footprints that will never be seen:

If we use the infinite rolling loading mode of waterfall flow, that is to say, we will never see our footer. When users browse to the bottom of the page and see the footer again and again, but because of the sudden appearance of the automatically loaded content, they can't click on the link or login in the footer anyway, then the user's experience is extremely bad. They may have a bad experience. Turn off your web page in anger.

3. Regarding the number of pages:

For users, it is convenient to use waterfall stream auto-loading instead of traditional page-changing. For developers'websites, page reduction may not be able to show more relevant information, the most obvious is the reduction of advertising.

3. Writing and Principle of Waterfall

What does a waterfall look like? Now let's write a simple waterfall layout by ourselves. Firstly, knock a little bit on the messy basic style and layout. ~Here we don't indent in order to save the 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:

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

The following is a simple JS code:

var wrap=document.querySelector("#wrap");
var ul=document.querySelectorAll("#wrap ul");//Declare element blocks
//First create a function of random numbers
function ranDom(min,max){
    return Math.random()*(max-min+1)+min;
}
//Create another add li Function
function createLi(num){
    for(var i=0;i<num;i++){
        var newLi=document.createElement("li");//Establish li
        newLi.style.height=ranDom(100,400)+"px";//Using random number functions to create highly different li
        var arrul=[];
//take ul Height for storage and comparison
        for(var j=0;j<ul.length;j++){
            arrul.push(ul[j].offsetHeight);//Storage ul Height
        }
        var minHeight=arrul[0];
        var minIndex=0;
        for(var k=0;k<arrul.length;k++){
            if(minHeight>arrul[k]){
                minHeight=arrul[k];//Compare the shortest height ul Then assign the value to minHeight
                minIndex=k;//Shortest height ul The subscript assigned to minIndex
            }
        }
    ul[minIndex].appendChild(newLi);//Shortest height ul Add in li
    }    
}
createLi(15);//Execution function, add 15 li，
//Create a scrolling event
window.onscroll=function(){  
// html Total height-Visualization window height=body The rolling height of ____________
//Compatible writing  
    var scrollTop=document.body.scrollTop;  
    var clientHeight=document.documentElement.clientHeight||document.body.clientHeight||window.innerHeight;  
    if(document.documentElement.offsetHeight-clientHeight<=scrollTop){  
        createLi(15);  
    }  
}
//When the scroll is about to reach the bottom,When it hasn't arrived yet,Execute the function again,Create new li 

In this way, we can realize the automatic loading waterfall flow layout that never sees the footer.

Four, summary

Simply speaking, waterfall flow is the uneven addition of content between multiple containers with different heights in the page container. When the mouse scrolls, it continuously loads data at the end of the container and automatically loads it into the vacancy position, that is, the shortest height position in the example, and continuously circulates.

Waterfall flow is an efficient and attractive way to display pictures. Users can get more information in a short time by scanning the fast-reading mode at a glance, while automatic loading in the waterfall stream avoids the page-turning operation that users click on with their mouse.

The main characteristic of waterfall flow is that it is scattered and uniform. The design of fixed width and variable height makes the page different from the traditional matrix image layout mode. The ingenious use of visual hierarchy and the arbitrary flow of sight alleviates visual fatigue, while giving people a sense of irregularity.