페이징을 트리거하는 워터폴 흐름과 워터폴 흐름을 트리거하는 페이징을 구현하는 AJAX 방법

소위 폭포 흐름 효과는 라이트 이미지 침대의 홈 페이지 효과와 같습니다. 비슷한 내용의 여러 열을 촘촘하게 배열하여 열 사이의 간격을 최소화하려고 합니다(예: 유동 레이아웃). 페이지 스크롤 막대가 아래로 스크롤되면 모든 데이터가 로드될 때까지 현재 페이지 끝에 새 데이터가 추가됩니다(스크롤 트리거 Ajax 페이지 전환).

폭포 흐름이 페이징을 유발합니다

다음 예에서 모두 사용할 수는 없지만 몇 가지 아이디어가 있습니다.
1. 화면에 들어갈 때 콘텐츠가 비어 있는지 확인합니다. 그렇지 않은 경우 비어 있으면 데이터 초기화를 시작합니다.
2. 화면까지 스크롤할 때 데이터의 가장 아래쪽 크기와 화면 높이 + 스크롤 높이를 결정합니다. 하단이 위 두 가지의 합보다 작을 경우 인터페이스를 다시 요청, 즉 데이터를 로드합니다.
3. 데이터가 일정 페이지 수를 초과하면 로딩을 중지하거나 페이지 형식으로 표시하려면 클릭하세요.

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(); 
}

위는 드롭다운 콘텐츠를 지속적으로 로드하는 비교적 간단한 코드입니다.

JSON 형식은 비슷합니다(동적 인터페이스인 경우 콜백 함수를 사용할 수 있으므로 여기에 fill()을 추가할 필요가 없습니다):

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
});

정적 인터페이스 콜백도 사용할 수 있습니다. 정적 처리는 서버 부담을 크게 완화하고 콘텐츠 생성을 가속화합니다. 이는 트래픽이 많은 웹사이트에 필요한 처리 방법입니다.

jQuery의 ajax 메소드는 워터폴 흐름을 트리거하는 페이징을 구현합니다

1. Ajax를 통해 다음 페이지의 콘텐츠를 가져옵니다
웹 페이지에서 다음 HTML 구조를 사용하여 탐색해야 합니다. 다음 페이지의 URL입니다.

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

해당 CSS

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

다음 코드는 Ajax를 통해 얻습니다. 한 페이지의 콘텐츠와 현재 콘텐츠의 끝에 추가됩니다.

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. 추가 콘텐츠에 대한 유동적인 레이아웃을 만듭니다.
jQuery에 익숙한 어린이는 다음을 통해 js가 페이지에 삽입된다는 것을 이해해야 합니다. Ajax는 동작하지 않지만 여기서는 live()를 사용하는 등의 처리를 할 필요가 없습니다. Masonry가 이미 내부적으로 비슷한 처리를 했고 기본적으로 작동하기 때문에 콜백에서 masonry()만 호출하면 됩니다. Ajax가 성공적으로 실행된 후의 함수입니다.

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

3. Ajax 페이지 넘김 프로세스 수정
위 프로세스에는 이미 완전한 폭포 흐름 레이아웃이 있지만 페이지 넘김 프로세스 중에 프롬프트가 없습니다. 또한 여러 그림을 직접 삽입하면 사용자 경험에 영향을 미칠 수 있으므로 페이지 넘김 프로세스를 일부 수정해야 합니다. 전체 코드는 다음과 같습니다.
새 콘텐츠가 로드 중이거나 마지막 페이지에 도달했음을 나타내려면 여기에 다음 요소를 추가해야 합니다.

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

해당 CSS

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

다음은 전체 Ajax 페이지 전환 코드입니다

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);
    }
  }
});

더 많은 AJAX 폭포 흐름 구현 페이징 트리거 및 워터폴 흐름을 트리거하는 페이징에 대한 관련 기사는 PHP 중국어 웹사이트를 참고하세요!