The so-called waterfall flow effect is just like the light map bed homepage effect. Multiple columns with similar content are closely arranged, trying to minimize the gap between the columns (i.e., fluid layout). As the page scroll bar scrolls down, new data will be added to the end of the current page until all data is loaded (scroll-triggered Ajax page turn).
Waterfall flow triggers pagination
Let me talk about the idea here, although the following examples cannot be used all of them:
1. When entering the screen, determine whether the content is empty. If it is not empty, start initializing the data.
2. When pulling down to the screen, judge the bottom of the data and the screen height + the scrolling height. If the bottom is smaller than the sum of the above two, re-request the interface, that is, load the data.
3. When the data exceeds a certain number of pages, stop loading or displaying it in paging form, and click to display the content.
var intf_url="http://VeVB.COM/intf";var pathUrl = "http://VeVB.COM/";var page=1;var isLoadRB=false; var ul_select=$("#fansList");var btn_more=$("#loading");if(ul_select.length <1) return ;var is_more =true;//Cross-domain request interface function loadjs(src,callback){ var js= document.createElement('script'); js.src = src; js.onreadystatechange = js.onload =function(){ if(!js.readyState || js.readyState=='loaded' || js.readyState=='complete'){ if(callback){callback()||callback}; }};js.charset="utf-8";document.getElementsByTagName('head')[0].appendChild(js);}//Callback function function fill(data){if(data.pageCount==data.pageNo){ is_more=false;//If all data is loaded, cancel the loading $("#loading").html("loaded");}}//Resolve the interface function queryIntf(){var url=page==1?intf_url+".json":intf_url+"_page"+page+".json";loadJs(url,callback);}function callback(){page++;}/*Judge whether the interface is to be loaded*/function needtoloadRB(){ var btn_top=btn_more.offset().top; var window_height=$(window).height(); var scroll_Top=$(window).scrollTop(); return btn_top<scroll_Top+window_height?true:false;}$(window).scroll(function(){ var _needload=needtoloadRB(); if(_needload && isLoadRB==false &&is_more){isLoadRB=true;queryintf();}})window.onload = function(){ queryintf(); }The above is a relatively simple idea code that keeps loading with the drop-down content.
The JSON format is similar to (if it is a dynamic interface, you can use the callback function, then you don't need to add fill() here):
fill({"fans":[{"nickname":"Cai Baojian","website":"VeVB.COM","youzhi":"2.5","time":"3 minutes ago"},{"nickname":"Cai Baojian","website":"VeVB.COM","youzhi":"2.5","time":"3 minutes ago"},{"nickname":"Cai Baojian","website":"VeVB.COM" ,"youzhi":"2.5","time":"3 minutes ago"},{"nickname":"Cai Baojian","we bsite":"VeVB.COM","youzhi":"2.5","time":"3 minutes ago"},{"nickname":"Cai Baojian","website":"VeVB.COM","youzhi":"2.5","time":"3 minutes ago"},{"nickname":"Cai Baojian","website":"VeVB.COM","youzhi":"2.5","time":"3 minutes ago"},{"ni ckname":"Cai Baojian","website":"VeVB.COM","youzhi":"2.5","time":"3 minutes ago"},{"nickname":"Cai Baojian","website":"VeVB.COM","youzhi":"2.5","time":"3 minutes ago"}],"pageCount":2,"pageNo":1,"pageSize":10,"totalSize":20});It turns out that static interface callbacks can also be used. Through static processing, the server pressure is greatly alleviated and content generation is accelerated, and it is a necessary processing method for large-scale websites.
jQuery's ajax method implements pagination triggering waterfall flow
1. Get the content of the next page through Ajax
We need navigation in the web page with the following HTML structure, next_link is the url of the next page.
<div id="page_nav"> <a href="next_link">Next page</a></div>
Corresponding css
#page_nav {clear: both; text-align: center; }The following code is to obtain the content of the next page through Ajax and append it to the end of the current content.
nextHref = $("#next_page a").attr("href");// Bind scroll event $(window).bind("scroll",function(){ // Determine whether the scrollbar of the window is close to the bottom of the page if( $(document).scrollTop() + $(window).height() > $(document).height() - 10 ) { // Determine whether the next page link is empty if( nextHref != undefined ) { // Ajax page turn $.ajax( { url: $("#page_nav a").attr("href"), type: "POST", success: function(data) { result = $(data).find("#thumbs .imgbox"); nextHref = $(data).find("#page_nav a").attr("href"); $("#page_nav a").attr("href", nextHref); $("#thumbs").append(result); } }); } else { $("#page_nav").remove(); } }});2. Fluid layout of additional content
Children's shoes familiar with jQuery should understand that js does not work for elements inserted into the page through Ajax, but there is no need to do this, such as using live(), because Masonry has made similar processing internally and works by default, so you only need to call the masonry() method in the callback function after Ajax is successfully executed.
$newElems = $result;$newElems.imagesLoaded(function(){ $container.masonry( 'appended', $newElems, true );});3. Modify the Ajax page turning process
There is already a complete waterfall flow layout in the above process, but there is no prompt during the page turning process, and inserting multiple pictures directly may affect the user experience, so some modifications are needed to be made to the page turning process. The complete code is given below.
Here you need to add an element as follows to prompt that new content is being loaded or that the prompt has reached the last page.
<div id="page_loading"> <span>Power loading...</span></div>
Corresponding css
The code copy is as follows:
#page_loading {display: none; background: #111111; opacity: 0.7; height: 60px; width: 220px; padding: 10px; position: absolute; bottom: -50px; left: 330px; }
Below is the complete Ajax page turn code
nextHref = $("#next_page a").attr("href");// Bind scroll event $(window).bind("scroll",function(){ // Determine whether the scrollbar of the window is close to the bottom of the page if( $(document).scrollTop() + $(window).height() > $(document).height() - 10 ) { // Determine whether the next page link is empty if( nextHref != undefined ) { // Show the loading module $("#page_loading").show("slow"); // Ajax page turn $.ajax( { url: $("#page_nav a").attr("href"), type: "POST", success: function(data) { result = $(data).find("#thumbs .imgbox"); nextHref = $(data).find("#page_nav a").attr("href"); $("#page_nav a").attr("href", nextHref); $("#thumbs").append(result); // Set the new content to transparent $newElems = result.css({ opacity: 0 }); $newElems.imagesLoaded(function(){ $container.masonry( 'appended', $newElems, true ); // Show new contents in progress$newElems.animate({ opacity: 1 }); // Hide the loading module $("#page_loading").hide("slow"); } }); } else { $("#page_loading span").text("Nothing, the last page!"); $("#page_loading").show("fast"); setTimeout("$('#page_loading').hide()",1000); setTimeout("$('#page_loading').remove()",1100); } }});