Using jquery to realize 3 cases of waterfall flow _jquery

one, waterfall flow is our common case, here mainly tells, uses the jquery the way to realize the waterfall flow function!

Introduction: We often see a lot of Web site waterfall flow functions, such as Taobao, jingdong these goods and so on.

To achieve it we first consider a few questions:1, get to Data 2, arrange the way 3, how to achieve the arrangement

In fact, there is a core function in the waterfall stream that uses absolute positioning.

We step into the in-depth analysis:

This is the layout of HTML, CSS layout can set their own, as long as the grid box to ensure absolute positioning, the parent element has a relative positioning can! There's a reference code behind it.

Here is the script section

In this way, you can get the index value of the picture in order through the For loop, and then constantly change the top and left values in its CSS style!

In our acquisition of the resources of the picture, sometimes the height of the picture is inconsistent, if you have been in accordance with the order, the final picture shows, the arrangement is not neat, will be poor!

Keep looking down:

We can solve this problem by using another method to make the picture insert the shortest column in the current column.

Here's a look at the jquery code:

OK, now we have solved the waterfall problem in two ways, but we still have a problem unresolved, that is the reason for the waterfall flow is because the volume of the picture is relatively large, we write HTML a bit too low!

Keep looking down:

Here's a way to use the engine template to get data from the JSON backend to do this!

1, we only need to build an HTML box can!

2, the box is set up, the data to obtain AH, depend on it!

3, this is two JS library, on the Internet can be downloaded to!

4, the following is the specific JS part, the need for careful analysis!

Mainly includes, calls the search engine template to obtain the content, the binding function, transforms into the jquery Object!

This section mainly includes: request data via AJAX to JSON

This part mainly includes: traversal function, to find the shortest column arrangement lattice!

There are also these, and also part IV:

The last step is: scrolling function, this part of the proposed use of console.log in the background to verify, easier to understand!

Although the last way to trouble, but this time the completion, we can use many times, and automatically get a lot of data!

The following for everyone to attach the original code, we have a good test, do not forget to change the picture and the path Oh!

The first method of the original code:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  
 
 

The second method is the original code:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  
 
 

The third method of the original code:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.