How jquery achieves infinite scrolling waterfall streams

The performance similar to pinterest is very popular now. In fact, I prefer the layout effect rather than the waterfall flow.

Although I do not particularly like the waterfall stream style, I wrote several articles about the Infinite rolling waterfall stream effect. Infinite scroll + Masonry = Infinite rolling waterfall stream, infinite-scroll-jquery scroll bar (drop-down) to load articles such as data plug-ins. It may be because my description is not very detailed, so many of my friends have read it clearly and sent me a letter for explanation. So with this article.

In fact, as early as: I mentioned the implementation principle of this effect in more than a dozen jquery unlimited rolling plug-ins. It mainly determines the distance between the scroll bar and the bottom. If it is smaller than or equal to the set height, ajax is executed to load asynchronous data to a fixed box. I think you are quite clear about this. I am afraid you may feel a little confused about how to obtain data. OK. Next, let's take a look at the step-by-step analysis of the notebook!

The first step of infinite scrolling is ajax asynchronous loading conditions:

We all know that the layout structure of some list pages is the same, and the data part is generated by the program. Each page has a link to the next page. OK. This is the basic condition (note the red part ).

In order to give you an intuitive comparison, I will use three pages for comparative analysis. The masonry effect is used here. I will not talk about this plug-in here, you can see the waterfall stream style effect created by the Masonry-jquery plug-in to have a simple understanding of this effect. The three pages have the same structure and different content (we use different images to differentiate them ).

On the left of the three pages, there are links to the next page. The link levels are

Default.html-> default1.html-> default2.html-> none

The following 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

Click the next page of each page. A new page is displayed with the same structure and different content as the previous page. The link on the next page of default2.html on the last page is empty, indicating that there is no page at the end.

In step 2 of infinite scrolling, how to perform ajax asynchronous loading:

After the first step is completed, we will post on the next page. In the link provided in step 1, we click the next page to open the next page and display the content. However, what we need to do now is to load data to the current page asynchronously using ajax. clicking a link does not open a new page, but loading the data from this link to this page. Of course, ajax is used here. Fortunately, ajax encapsulated by jquery is relatively simple. We can easily load the content of other pages to the current page.

There are three pages with the same structure and different content: (click 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 take a look at the specific implementation code section.

$ (". Next_page "). click (function () {// obtain the URL of the next page first var href = $ (this ). attr ("href"); // determines whether the link has been loaded startHref = href; // determines whether the link address on the next page exists if (href! = Undefined) {// If yes, use ajax to get data $. ajax ({type: "get", url: href, success: function (data) {// process the returned data, the selected class is the post content block var $ res = $ (data ). find (". post "); // combined with the masonry plug-in, append the content into the content block where ID is content $ (" # content "). append ($ res ). masonry ('append', $ res); // newHref gets the URL of the next page in the returned content var newHref = $ (data ). find (". next_page "). attr ("href"); // determines whether the next page address exists. If so, replace the link address of the current page. Does not exist. Remove href from the link property of the current page and replace it with "no more on the next page" if (newHref! = Undefined) {$ (". next_page "). attr ("href", newHref);} else {$ (". next_page a ").html (" the next page is missing "). removeAttr ("href") }}) // return false, which invalidates the return false when you click to enter the new page ;})

To express this process in text, click the link, asynchronously load the data in the Link, select the content that meets the conditions, and then load the content to the fixed container on the page using js, replace the link address with the new link address. And handle the case that there is no next page.

The link addresses on the next page may change, for example, "123456 ..." Such a link structure; of course, in this case, we can use a link address such as the current class, then the next page address is a link after the current, then, replace the container containing all the paging addresses with the returned data. For specific analysis of specific problems, click here.

In addition, masonry la s the data returned by ajax, which belongs to the scope of masonry and is not explained too much. For more information about masonry, visit this site.

In step 3, the scroll bar controls infinite loading:

The so-called scroll bar controls infinite scrolling, but replaces the click effect. You can scroll the scroll wheel or drag the scroll bar to the bottom to load data asynchronously.

What should you do if you want to implement it?

Yes, we only need to judge the position of the scroll bar from the bottom. At the bottom, we load the data once.
However, there is another problem. Because we need to obtain the latest position of the scroll bar in real time, and the position of the scroll bar is not automatic, we cannot click a button to retrieve the data once, or use setTimeout, obtain data at intervals. Of course, these are not feasible.
A feasible method is to bind a scroll event to the window. The so-called binding event is to listen to this object and monitor its every action. If the scroll bar ends when the window is rolling, we can asynchronously load data in our small actions. OK. Check the code implementation.

// First bind the event scroll $ (window) to the window ). bind ("scroll", function () {// then judge whether the scroll bar of the window is close to the bottom of the page. Here 20 can be customized if ($ (document ). scrollTop () + $ (window ). height ()> $ (document ). height ()-20) {// I am too lazy to write ajax calls, directly triggering the link click event. If ($ (". next_page a"). attr ('href ')! = StartHref) {// check whether the current link has been loaded $ (". next_page a"). trigger ("click ");}}})

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

In the code above, I did not write the specific ajax call process, but triggered the link Click Event on the basis of the original. If you want to view the ajax effect of the rolling implementation, open the URL: http://www.niumowang.org/demo/infinite/auto_ajax1.html Code required.

There is a number on it that is 20, that is, the scroll bar starts loading at the bottom or 20 pixels. This is to achieve the effect of pre-loading, so that the data is not loaded when the user scrolls to the bottom. If you feel that your content is large, you can add this value.

The implementation principle of the infinite scroll effect is summarized as follows:

At this point, the effect of an infinite scroll bar is finished. Make a final summary.

It can be said that the effects of unlimited Scrolling on the Internet are different, and the framework based on is also different. I wrote this article to help you understand how this effect is achieved.

The text principle part of this method: After the scroll bar is rolled, if it reaches the bottom, or a distance from the bottom, find the link address of the next page and obtain the data in this address. Then, the returned data is added to the fixed container with a new layout. OK, that's simple.

The advanced section of infinite scrolling:

There is not much advanced level, but it is possible to load data instead of using this get or post method, even if the load PAGE method, but reading data from the database by passing parameters. You can also add special effects on returned data, such as adding a dot animation when you relay the returned data, or adding a smooth scroll effect on the scroll bar. Gerr, remember one sentence: as long as you practice it, all technical schools are paper tigers.

2013.06.01 BUG Adjustment

Several of the following mentioned the problem of loading multiple times, because the original design did not take into account the problem of changing the scroll bar after loading the content. This is the case. I have time to solve this problem recently. By the way, I would like to thank the friends who raised the following questions.
The modification method mainly defines a global variable var startHref;
After next_page is triggered once, modify the value of this startHref and obtain the value of the link in the current next_page during scrolling. Compare it with startHref and execute the loading process if they are different.
Effect view: http://www.niumowang.org/demo/infinite/auto_ajax.html