AJAX-Methode zur Implementierung von Wasserfallfluss-auslösendem Paging und Paging-auslösendem Wasserfallfluss

Der sogenannte Wasserfall-Flow-Effekt ähnelt dem Effekt der Startseite des Lichtbildbetts. Mehrere Spalten mit ähnlichem Inhalt werden eng angeordnet, wobei versucht wird, die Lücken zwischen den Spalten zu minimieren (d. h. ein flüssiges Layout). Die Bildlaufleiste der Seite scrollt nach unten. Neue Daten werden an das Ende der aktuellen Seite angehängt, bis alle Daten geladen sind (durch Scrollen ausgelöstes Ajax-Seitenblättern).

Wasserfallfluss löst Paging aus

Hier sind einige Ideen, obwohl nicht alle davon in den folgenden Beispielen verwendet werden können:
1. Stellen Sie beim Betreten des Bildschirms fest, ob der Inhalt leer ist . Wenn nicht, leer, beginnen Sie mit der Dateninitialisierung.
2. Bestimmen Sie beim Herunterscrollen auf dem Bildschirm die Größe des unteren Rands der Daten und die Höhe des Bildschirms + die Höhe des Bildlaufs. Wenn der untere Wert kleiner als die Summe der beiden oben genannten ist, fordern Sie die Schnittstelle erneut an, dh laden Sie die Daten.
3. Wenn die Daten eine bestimmte Anzahl von Seiten überschreiten, stoppen Sie den Ladevorgang oder zeigen Sie sie in Seitenform an. Klicken Sie, um den Inhalt erneut anzuzeigen.

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

Das Obige ist ein relativ einfacher Code, der den Dropdown-Inhalt kontinuierlich lädt.

Das JSON-Format ist ähnlich (wenn es sich um eine dynamische Schnittstelle handelt, können Sie die Callback-Funktion verwenden, sodass hier kein Fill() hinzugefügt werden muss):

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

Es dreht sich heraus, dass auch statische Schnittstellenrückrufe verwendet werden können. Die statische Verarbeitung entlastet den Server erheblich und beschleunigt die Inhaltsgenerierung, eine notwendige Verarbeitungsmethode für Websites mit hohem Datenverkehr.

Die Ajax-Methode von jQuery implementiert Paging, um den Wasserfallfluss auszulösen

1. Holen Sie sich den Inhalt der nächsten Seite über Ajax
Wir benötigen eine Navigation mit der folgenden HTML-Struktur auf der Webseite: next_link die nächste Die URL einer Seite.

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

Entsprechendes CSS

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

Der folgende Code wird über Ajax abgerufen. Eine Seite mit Inhalt und am Ende des aktuellen Inhalts angehängt.

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. Erstellen Sie ein flüssiges Layout für den zusätzlichen Inhalt
Kinder, die mit jQuery vertraut sind, sollten verstehen, dass js durch in die Seite eingefügt wird Ajax funktioniert nicht, es ist jedoch keine Verarbeitung wie die Verwendung von live() erforderlich, da Masonry intern bereits eine ähnliche Verarbeitung durchgeführt hat und diese standardmäßig funktioniert, sodass Sie im Rückruf nur masonry() aufrufen müssen Funktion nach erfolgreicher Ausführung der Ajax-Methode.

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

3. Ändern Sie den Ajax-Umblätterprozess
Im obigen Prozess gibt es bereits ein vollständiges Wasserfall-Flusslayout, aber es gibt keine Eingabeaufforderung während des Umblättervorgangs Darüber hinaus kann das direkte Einfügen mehrerer Bilder die Benutzererfahrung beeinträchtigen, sodass einige Änderungen am Umblättervorgang vorgenommen werden müssen. Der vollständige Code ist unten angegeben.
Sie müssen hier das folgende Element hinzufügen, um anzuzeigen, dass neuer Inhalt geladen wird oder dass die letzte Seite erreicht wurde.

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

Entsprechendes CSS

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

Das Folgende ist der vollständige Ajax-Umblättercode

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

Mehr AJAX-Implementierung des Wasserfallflusses Weitere Artikel zum Auslösen von Paging und zum Auslösen des Wasserfallflusses durch Paging finden Sie auf der chinesischen PHP-Website!