Now the performance effects like pinterest are very popular. In fact, I prefer his layout effect, not the waterfall flow.
Although I don't particularly like the presentation style of this waterfall flow, I have written several articles about the effect of infinite scrolling waterfall flow, Infinite scroll+Masonry=Infinite scrolling waterfall flow , infinite-scroll-jquery scroll bar (drop-down) to load data Articles like plugins . It may be that my description is not very detailed and clear, so many friends did not read it very clearly, and sent letters to me for explanation. Hence today's article.
In fact, as early as: I mentioned the realization principle of this effect in the article of more than a dozen jquery infinite scrolling plugins . It is mainly to judge the distance between the scrolling position of the scroll bar and the bottom. If it is less than or equal to the set height, then execute ajax to load asynchronous data into a fixed box. I think everyone is relatively clear on this point, but I am afraid that they are a little confused about how to obtain data. OK, let's see the step-by-step analysis of the ruffian!
The first step of infinite scrolling, 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. And each page has a link address to the next page . OK, this is the basic condition (note the red part ).
In order to make an intuitive comparison for everyone, I will take out 3 pages for comparative analysis, among which the effect of masonry is used. I won't say much about this plugin here. You can see the waterfall style effect created by the Masonry-jquery plugin. There is a simple understanding of the effect. The structure of these three pages is the same, and the content is different (we use different pictures to distinguish).
There are links to the next page on the left side of these three pages, and the link levels are
default.html -> default1.html ->default2.html -> 无
Here are the 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
When we click on the next page of each page, we will see that the page will open a new page with the same structure as the previous page, but with different content. The link to the next page of the last page default2.html is an empty link, which means that there is no page behind.
The second step of infinite scrolling, how does ajax asynchronous loading work:
After the work of the first step is completed, we will make an article at the link on the next page above. In the link provided in the first step, when we click on the next page, the link to the next page will be opened and the content will be displayed. But what we need to do now is to use ajax to asynchronously load data to the current page, so that clicking on the link does not open a new page, but loads the data in this link to this page . Of course, ajax is used here. Fortunately, the ajax packaged by jquery is relatively simple, and it is easy for us to load the content of other pages into the current page.
Or 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 look at the specific implementation code part:
$(".next_page a").click(function() {
//First get the link address of the next page
var href = $(this).attr("href");
// Determine if the link has been loaded
startHref = href;
/ / Determine whether the link address of the next page exists
if (href != undefined) {
//If it exists, use ajax to get the data
$.ajax({
type: "get",
url: href,
success: function(data) {
//Process the returned data and select the content block whose class is post
var $res = $(data).find(".post");
//Combined with the masonry plugin, append the content into the content block whose ID is content
$("#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");
//Determine whether the address of the next page exists, if so, replace the link address of the current page. If it does not exist, remove the link address attribute href of the current page and replace the content with "The next page is gone"
if (newHref != undefined) {
$(".next_page a").attr("href", newHref);
} else {
$(".next_page a").html("The next page is gone").removeAttr("href")
}
}
})
}
//Return false, making clicking to enter a new page invalid
return false;
})
To express this process in words is: click on the link, load the data in the link asynchronously, select the content that meets the conditions, then load the content into the fixed container of this page with js, and replace the address of the link with a new one link address. And handle if there is no next page.
Among them, the link address of the next page may be more variable, for example, there is a link structure such as "123456..."; of course, in this case, we can use to obtain the link address such as class current, then the next page The address of is a link after current, and then the container containing all the paging addresses is replaced with the return data. The so-called specific analysis of specific problems, here is the end.
In addition, masonry rearranges the data returned by ajax, which belongs to the category of masonry and will not be explained too much. Find relevant information about masonry yourself from this site.
The third step of infinite scrolling, the scroll bar controls infinite loading:
The so-called scroll bar controls infinite scrolling, but the effect of clicking is replaced . We implement the original click to load data asynchronously by scrolling the mouse wheel or dragging the scroll bar to the bottom.
If you want to achieve it, how do you do it?
Yes, we just need to determine the position of the scroll bar from the bottom. If we reach the bottom, we load the data once.
But there is still a problem, because we need to get the latest position of the scroll bar in real time, and getting the scroll bar position is not automatic, we can't click a button to get the data once, or use setTimeout to get the data every once in a while. Of course these are not feasible.
A more feasible method is: we bind a scroll event to the (window) window. The so-called binding event is to monitor this object and monitor its every move. If the scroll bar is at the end when the window is scrolled, then we can perform our small actions to asynchronously load the data in. OK, look at the code implementation.
//First bind the event scroll to the window
$(window).bind("scroll",function() {
// Then judge whether the scroll bar of the window is close to the bottom of the page, 20 here can be customized
if ($(document).scrollTop() + $(window).height() > $(document).height() - 20) {
//I'm being lazy here, I didn't write the ajax call, and directly triggered the click event of the link.
if($(".next_page a").attr('href') != startHref){
//Here to determine whether the link to be loaded has been loaded
$(".next_page a").trigger("click");
}
}
})
Demo address: http://www.niumowang.org/demo/infinite/auto_ajax.html
In the above code part, I did not write the specific calling process of ajax, but triggered the click event of the link on the original basis. If you want to see the ajax effect implemented by scrolling, open the address: http://www.niumowang.org/demo/infinite/auto_ajax1.html to view the code section by yourself.
There is a number above 20, that is, the scroll bar starts loading when it is still 20 pixels from the bottom. This is to achieve the effect of preloading, so that when the user scrolls to the bottom, the data has not been loaded. If you feel that your content is larger, you can also increase this value.
The principle of infinite scrolling effect, summary:
At this point, the effect of a scroll bar to achieve infinite scrolling is finished. Do a final summary.
It can be said that the effects of infinite scrolling on the Internet are different, and the frameworks based on them are also different. The purpose of my writing this article is to let everyone understand an idea and understand how this effect is made.
The text principle part of my method: After the scroll bar scrolls, if it reaches the bottom, or when it is a distance from the bottom, find the link address of the next page and get the data in this address. The returned data is then added to the fixed container using re-layout. OK, it's that simple.
Advanced advanced section of infinite scroll:
In other words, the advanced level is not very advanced, but it is possible that the data is not loaded in this way of get or post, even if the page is loaded, but by passing parameters to read data from the database. Or add some special effects for returning data, such as adding some animation when re-layout after returning data, or adding some smooth scrolling effect to the scroll bar. But err, remember one sentence: as long as you practice, all technical schools are paper tigers.
2012.08.30 BUG adjustment
Several friends below mentioned the problem of multiple loading, because the original design did not take into account the change of the scroll bar after loading the content. So this happened. I have time to fix it recently. By the way, thanks to the friends who raised the question below.
The modification method is mainly to define a global variable var startHref;
then after the next_page is triggered once, modify the value of this startHref, get the value of the link in the current next_page when scrolling, compare it with startHref, and execute the loading process if it is different .
View the effect: http://www.niumowang.org/demo/infinite/auto_ajax.html