The realization principle of the infinite rolling waterfall flow implemented by jquery

Now, like Pinterest, this kind of performance is very hot, actually I prefer his layout effect, rather than the kind of waterfall flow.

Although I do not particularly like this waterfall flow performance style, but still wrote a few about the infinite scrolling waterfall flow effect of the article, Infinite scroll+masonry= infinite scrolling waterfall stream, infinite-scroll-jquery scroll bar (dropdown) Load an article such as a data plug-in. May be I express the description is not very detailed, so many friends see is not very clear, the concurrent letter to me for explanation. So with this article today.

In fact, as early as: more than 10 jquery infinite scroll plugin in this article I mentioned the implementation of this effect principle. The main thing is to determine the distance from the bottom of the scroll bar scrolling, if it is less than or equal to the set height, then execute AJAX to load asynchronous data into a fixed box. I think we are quite clear about this point, I am afraid I feel a little unclear about how to get the data. OK, look at the step-by-step analysis of the Ruffian!

Infinite scrolling The first step, the AJAX asynchronous load condition:

As we all know, for some list pages The layout structure is the same, the data part is generated by the program. And each page has a link address for the next page. OK, this is the basic condition (note the red part).

In order to make an intuitive comparison, I here take out 3 pages for comparative analysis, which uses the effect of masonry, about this plugin I do not say, you can see the Masonry-jquery plug-in to create a waterfall flow style effect to have a simple understanding of the effect. The structure of the three pages is the same, the content is not the same (we use different images to distinguish).

Each of the three pages has a link to the next page on the left, and the link hierarchy is

Default.html, default1.html->default2.html, no

Here are three page addresses:

Http://www.niumowang.org/demo/infinite/default.html
Http://www.niumowang.org/demo/infinite/default1.html
Http://www.niumowang.org/demo/infinite/default2.html

We click on the next page of each page to see that the page opens a new page structure that is the same as the previous page, with different content. The last page default2.html the next link is an empty connection, which means there are no pages behind.

Infinite scrolling The second step, how Ajax asynchronous loading is performed:

After the first step of the work is done, we are going to make a fuss on the next page link above. In the link provided in the first step, we click on the next page to open the link to the next page and display the content. But all we have to do now is to use AJAX to load the data into the current page asynchronously, implementing the click-through link without opening a new page, but loading the data from this link to this page. Of course, Ajax is used here, fortunately, jquery encapsulated Ajax is relatively simple, we can easily implement the content of other pages loaded into the current page.

or three pages with the same structure and different content: (click on the next page to see the effect)

Http://www.niumowang.org/demo/infinite/ajax.html
Http://www.niumowang.org/demo/infinite/ajax1.html
Http://www.niumowang.org/demo/infinite/ajax2.html

Let's look at the specific implementation Code section:

$ (". Next_page a"). Click (function () {//) first get the next page of the link address var href = $ (this). attr ("href");//Determine if the link has been loaded starthref = href; If the link address of a page exists if (href! = undefined) {//If present, use Ajax to get the data $.ajax ({type: "Get", Url:href, Success:function (data) {//will return the number According to the processing, a class is selected as the content block of the post var $res = $ (data). Find (". Post"); In conjunction with the masonry plugin, the content is append into the contents of the content block of $ ("#content"). Append ($res). Masonry (' appended ', $res); Newhref gets the link address of the next page in the returned content var newhref = $ (data). Find (". Next_page a"). attr ("href"); Determines whether the next page address exists and, if present, replaces the current page's link address. Does not exist, removes the current page link Address property href and replaces the content with "next page without" if (newhref! = undefined) {$ (". Next_page a"). attr ("href", newhref);} else {$ (". Next _page a "). html (" the next page does not have "). Removeattr (" href ")}})}//returns false so that clicking into the new page fails return false; })

In the text to express this process is: Click on the link, asynchronously load the data in the link, pick out the content of the match, and then the content with JS loaded into the page fixed container, and the link to replace the address of the new link address. and processing if no next page is in progress.

Where you find the link address of the next page may be more changeable, such as the existence of "123456 ..." Such a link structure; Of course, in this case, we can use a link address, such as a class to current, then the next page of the address is a link behind the current, and then use the return data will contain all the paging address of the container replaced. Specific analysis of the so-called specific problem, where the point to stop.

The other is masonry the AJAX returned data to re-layout the operation, this belongs to the category of masonry, do not do too much explanation. About masonry himself from the site to find relevant information.

Infinite scrolling third step, scroll bar control infinite load:

The so-called scroll bar controls infinite scrolling, but replaces the click Effect. We do this by scrolling the mouse wheel, or by dragging the scroll bar to the bottom to achieve the original click Loading data asynchronously.

What do you do if you want to achieve it?

Yes, we just need to determine the position of the scroll bar at the bottom of the line. If we get to the bottom, we load the data once.
But there is also a problem, because we need to get the latest scroll bar position in real time, and get the scroll bar position is not automatic, we can not click a button to get the data bar, or use settimeout, every time to get data once. Of course, none of this is feasible.
The more plausible approach is that we bind a scroll event to the window-the so-called binding event is to listen to the object and monitor its movements. If the window is scrolling and the scroll bar is in the end, then we can do our little trick of loading the data asynchronously. OK, look at the code implementation.

First, the window is bound to the event scroll $ (window). Bind ("scroll", function () {///and then determine if the window's scrollbar is close to the bottom of the page, where 20 can customize if ($ (document). ScrollTop () + $ (window). Height () > $ (document). Height ()-20) {//I'm stealing a lazy here, no Ajax calls, directly triggering the link's Click event. if ($ (". Next_page a"). attr (' href ')! = Starthref) {//This determines whether the link currently being loaded has already been loaded (". Next_page a"). Trigger ("click");}} })

Demo Address: http://www.niumowang.org/demo/infinite/auto_ajax.html

In the above Code section, I did not write the specific calling process of Ajax, but instead triggered a linked click event on the original basis. If you want to see the Ajax effect of scrolling implementation, open the address: http://www.niumowang.org/demo/infinite/auto_ajax1.html self-View the Code section.

The number above is 20, that is, when the scroll bar is at the bottom or 20 pixels, it starts to load. This is to achieve the preload effect, not when the user scrolls to the bottom of the time, the data has not been loaded, if you feel your content is larger, you can also increase this value.

The implementation principle of infinite scrolling effect, summarize:

At this point a scroll bar to achieve infinite scrolling effect is finished. Do a final summary of the work.

It can be said that the online implementation of unlimited scrolling effect is different, based on the framework is not the same. The purpose of my writing this article is to get people to understand the idea of how this effect is done.

I have this method of the text principle part: Scroll bar after scrolling, if you reach the bottom, or a distance from the bottom of the time, find the next page of the link address, get the data in this address. The returned data is then added to the fixed container using a re-layout. OK, that's easy.

Advanced Step-by-step sections for infinite scrolling:

The advanced level is not as advanced as it is, but it is possible to load data instead of using this get or post, even if the load page is the way it is, but by passing the parameter, the data is read from the database. or add some special effects to the returned data, such as returning data, adding point animations when re-layout, or adding a smooth scrolling effect to the scroll bar. Mediocre, remember a word: as long as to practice, all technical School is a paper tiger.

2012.08.30 Bug Adjustment

Several of the following friends mentioned the issue of multiple loading, because the original design did not take into account the load after the content of the scroll bar changes. So there was this situation. There is time to solve it recently. Thanks a few friends who have raised the question below.
The modification method is mainly to define a global variable var starthref;
Then next_page trigger once, modify the value of this starthref, at the time of scrolling to get the current value of the link in the Next_page, compared with the starthref, if the different words and then perform the loading process.
Effect View: http://www.niumowang.org/demo/infinite/auto_ajax.html

The realization principle of the infinite rolling waterfall flow implemented by jquery