JS for waterfall flow and loading effect

What is a waterfall flow?

Waterfall Flow, is a more popular Site page layout, visual performance for the uneven multi-column layout, as the page scroll bar scroll down, this layout will continue to load the data block and attached to the current trailer.

The first to use waterfall flow layout of the site is Pinterest, gradually in the domestic popular, such as we know the layout of Baidu Pictures, in "A long time" before, Baidu Pictures or need a page of click to see more pictures, and now the waterfall flow layout makes it easier for users to find pictures.

　　

Ii. advantages and disadvantages of waterfall flow

Advantages:

1. Save the space of the page, no longer need navigation and page number buttons.

2. Enhance the user experience, so that the user's experience is more to browse the picture, rather than looking for how to find the next page and switch operation.

Disadvantages:

1. The type of Web page used is limited:

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

For example, when we buy things in a treasure, we need to remember which of the first pages of the product we want to buy, and then back to buy, this time we need to help remember the page button, waterfall flow is more troublesome.

2. Never see the footer:

If we use the Waterfall Flow infinite scrolling mode, that means that we can never see our footer, when users browse to the bottom of the page again and again, see the footer, but because the automatic loading of the content of the sudden appearance, no matter how can not click on the link in the footer or login, then the user experience is very bad, They may turn off your webpage angrily.

3. About the number of pages:

For users, it is convenient to use the waterfall stream to automatically load instead of the traditional page change, and for the developer's website, the reduction of the page may not be able to show more relevant information, the most obvious is the decrease in advertising.

　　

Three, waterfall flow writing and principle

What does the waterfall flow look like, then let's write a simple waterfall flow layout now. First the mess of the basic style and layout a little knock ~ here we to save space, it does not indent ~

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");//Declaration element block// First, create a random number function, random (Min,max) {return math.random () * (max-min+1) +min;}        Then create a function Createli (num) {for (Var i=0;i<num;i++) {var newli=document.createelement ("Li") to add Li;//create Li Newli.style.height=random (100,400) + "px";//Use the random number function to create a highly different Li Var arrul=[];//store and compare the UL height for the for (Var j=0;j&        lt;ul.length;j++) {Arrul.push (ul[j].offsetheight);//Store UL's 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 height of the shortest ul and then Assign value to MinHeight minindex=k;//the height of the shortest UL subscript assigned to Minindex}} ul[minindex].appendchild (Newli); Add Li} to the shortest UL}createli (15);//Execute function, add 15 li,//Create a scroll event window.onscroll=function () {///HTML Total Height-visual window height =body Scroll height/      /compatible notation 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, not yet arrived, go to the function, create a new Li

This allows us to achieve an automatically loaded waterfall flow layout that never sees the footer.

　　

Iv. Summary

Waterfall flow is simply a page container within the multiple height of the container between the uneven content of the addition, the mouse scrolling constantly in the end of the container loading data, and automatically loaded into the vacant position, which is the example of the height of the shortest position, continuous circulation.

Waterfall flow for the image of the display, is efficient and attractive, the user glanced at the rapid reading mode can be in a short time to obtain more information, and the waterfall stream automatically loaded to avoid the user mouse click on the page action.

Waterfall flow is the main characteristics of the patchwork, fixed wide and high-quality design so that the page is different from the traditional matrix picture layout mode, clever use of visual hierarchy, the flow of sight to alleviate the visual fatigue, at the same time to give people to eclectic feeling.

JS for waterfall flow and loading effect