AJAX method to implement waterfall flow triggering paging and paging triggering waterfall flow

The so-called waterfall flow effect is just like the effect of the home page of the light image bed. Multiple columns with similar content are arranged closely, trying to minimize the gaps between columns (i.e. fluid layout), and as the page scroll bar scrolls down, New data will be appended to the end of the current page until all data is loaded (scroll-triggered Ajax page turning).

Waterfall flow triggers paging

Here are some ideas, although not all of them can be used in the following examples:
1. When entering the screen, determine whether the content is empty. If not, Empty, start initializing data.
2. When scrolling down to the screen, determine the size of the bottom of the data and the height of the screen + the height of the scroll. If the bottom is less 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 display it in paging form. Click to display the content again.

var intf_url="http://php.cn/intf";
var pathUrl = "http://php.cn/";
var page=1;
var isLoadRB=false; 
var ul_select=$("#fansList");
var btn_more=$("#loading");
if(ul_select.length <1) return ;
var is_more =true;
//跨域请求接口
function loadjs(src,callback){
 var js= document.createElement(&#39;script&#39;);
 js.src = src;
 js.onreadystatechange = js.onload =function(){
 if(!js.readyState || js.readyState==&#39;loaded&#39;
  || js.readyState==&#39;complete&#39;){
  if(callback){callback()||callback};
 }
};
js.charset="utf-8";
document.getElementsByTagName(&#39;head&#39;)[0].appendChild(js);
}
//回调函数
function fill(data){
if(data.pageCount==data.pageNo){
 is_more=false;//如果数据全部加载完毕，取消加载
    $("#loading").html("加载完毕");
}
}
//解析接口
function queryIntf(){
var url=page==1?intf_url+".json":intf_url+"_page"+page+".json";
loadJs(url,callback);
}
function callback(){
page++;
}
/*判断是否要加载接口*/
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 code that continuously loads the drop-down content.

The JSON format is similar (if it is a dynamic interface, you can use the callback function, so there is no need to add fill() here):

fill({"fans":[{"nickname":"蔡宝坚","website":"php.cn","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"}],"pageCount":2,"pageNo":1,"pageSize":10,"totalSize":20
});

It turns out that static interface callbacks can also be used. Static processing greatly relieves server pressure and accelerates content generation, which is a necessary processing method for high-traffic websites.

jQuery's ajax method implements paging to trigger waterfall flow

1. Obtain the content of the next page through Ajax
We need navigation with the following HTML structure in the web page, next_link is the next The url of one page.

<div id="page_nav">
  <a href="next_link">下一页</a>
</div>

Corresponding css

#page_nav {clear: both; text-align: center; }

The following code is used to obtain the content of the next page through Ajax , and appended to the end of the current content.

nextHref = $("#next_page a").attr("href");
// 给浏览器窗口绑定 scroll 事件
$(window).bind("scroll",function(){
  // 判断窗口的滚动条是否接近页面底部
  if( $(document).scrollTop() + $(window).height() > $(document).height() - 10 ) {
    // 判断下一页链接是否为空
    if( nextHref != undefined ) {
      // Ajax 翻页
      $.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 who are familiar with jQuery should understand js for elements inserted into the page through Ajax and Does not work, but there is no need to do processing such as using live() here, because Masonry has already done similar processing internally and it works by default, so you only need to call the masonry() method in the callback function after the Ajax is successfully executed. That’s it.

$newElems = $result;
$newElems.imagesLoaded(function(){
  $container.masonry( 'appended', $newElems, true );
});

3. Modify the Ajax page turning process
In the above process, there is already a complete waterfall flow layout, but there is no prompt during the page turning process, and it is directly Inserting multiple pictures may affect the user experience, so some modifications need to be made to the page turning process. The complete code is given below.
You need to add the following element here to indicate that new content is being loaded or that the last page has been reached.

<div id="page_loading">
  <span>给力加载中……</span>
</div>

Corresponding css

#page_loading {display: none; background: #111111; opacity: 0.7; height: 60px; width: 220px;  padding: 10px; position: absolute; bottom: -50px; left: 330px; }

The following is the complete Ajax page turning code

nextHref = $("#next_page a").attr("href");
// 给浏览器窗口绑定 scroll 事件
$(window).bind("scroll",function(){
  // 判断窗口的滚动条是否接近页面底部
  if( $(document).scrollTop() + $(window).height() > $(document).height() - 10 ) {
    // 判断下一页链接是否为空
    if( nextHref != undefined ) {
      // 显示正在加载模块
      $("#page_loading").show("slow");
      // Ajax 翻页
      $.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);
          // 把新的内容设置为透明
          $newElems = result.css({ opacity: 0 });
          $newElems.imagesLoaded(function(){
            $container.masonry( 'appended', $newElems, true );
            // 渐显新的内容
            $newElems.animate({ opacity: 1 });
            // 隐藏正在加载模块
            $("#page_loading").hide("slow");              
          });
  
        }
      });
    } else {
      $("#page_loading span").text("木有了噢，最后一页了！");
      $("#page_loading").show("fast");
      setTimeout("$('#page_loading').hide()",1000);
      setTimeout("$('#page_loading').remove()",1100);
    }
  }
});

More AJAX implementations of waterfall flow triggering paging and paging triggering waterfall For articles related to streaming methods, please pay attention to the PHP Chinese website!