Der sogenannte Wasserfall-Fluss-Effekt entspricht genau dem Homepage-Effekt des Light Map-Bettes. Mehrere Spalten mit ähnlichem Inhalt sind eng angeordnet und versuchen, die Lücke zwischen den Spalten zu minimieren (d. H. Flüssigkeitslayout). Wenn die Seite Scroll-Balken nach unten scrollt, werden zum Ende der aktuellen Seite neue Daten hinzugefügt, bis alle Daten geladen sind (scrollgesteuerte Ajax-Seite drehen Sie).
Wasserfallfluss löst Paginierung aus
Lassen Sie mich hier über die Idee sprechen, obwohl die folgenden Beispiele nicht alle verwendet werden können:
1. Beim Eingeben des Bildschirms bestimmen Sie, ob der Inhalt leer ist. Wenn es nicht leer ist, initialisieren Sie die Daten.
2. Wenn Sie zum Bildschirm nach unten ziehen, beurteilen Sie den Boden der Daten und die Bildschirmhöhe + die Bildlaufhöhe. Wenn der Boden kleiner als die Summe der beiden oben genannten zwei ist, beladen Sie die Schnittstelle, dh die Daten.
3. Wenn die Daten eine bestimmte Anzahl von Seiten überschreiten, laden oder anzeigen Sie sie in Paging -Form und klicken Sie auf, um den Inhalt anzuzeigen.
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 = $ ("#laden"); if (ul_select.Length <1) return; var is_more = true; // cross-domain request interface function function function laden (src, tappback) {var js = document.createlement ('script'); Js.Src = Src; Js.onReadyStatechange = js.onload = function () {if (! Js.ReadyState || Js.ReadyState == 'Loaded' || Js.ReadyState == 'Complete') {if (Callback) {Callback () || Callback}; }}. $ ("#laden"). geladen*/function Needtoloadrb () {var btn_top = btn_more.offset (). Top; var window_height = $ (Fenster) .Height (); var scroll_top = $ (Fenster) .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 Ideencode, der mit dem Dropdown-Inhalt weiterhin geladen wird.
Das JSON -Format ähnelt (wenn es sich um eine dynamische Schnittstelle handelt, können Sie die Rückruffunktion verwenden, dann müssen Sie Fill () hier nicht hinzufügen):
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 AGE "}, {" Spitzname ":" Cai Baojian "," Website ":" vevb.com "," Youzhi ":" 2.5 "," Zeit ":" 3 Minuten "}, {" Spitzname ":" Cai Baojian "," Website ":" Vevb.com ", Youzhi", ":", ",", ",", ",", ",", ",": ",", ":", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", "3 Minuten", "« ",", ",", ",", ",", ",", ",", ",", ",", ",", ", 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 vor "}]," PageCount ": 2," pageno ": 1," pageSize ": 10," sumalSize ": 20});Es stellt sich heraus, dass auch statische Schnittstellen -Rückrufe verwendet werden können. Durch die statische Verarbeitung wird der Serverdruck erheblich gelindert und die Inhaltsgenerierung beschleunigt, und es ist eine notwendige Verarbeitungsmethode für groß angelegte Websites.
Die AJAX -Methode von JQuery implementiert Pagination auslösen Wasserfallfluss
1. Holen Sie sich den Inhalt der nächsten Seite über Ajax
Wir brauchen Navigation auf der Webseite mit der folgenden HTML -Struktur, Next_Link ist die URL der nächsten Seite.
<div id = "page_nav"> <a href = "next_link"> nächste Seite </a> </div>
Entsprechende CSS
#page_nav {clear: beides; Text-Align: Mitte; }Der folgende Code besteht darin, den Inhalt der nächsten Seite über AJAX zu erhalten und ihn am Ende des aktuellen Inhalts anzuhängen.
nexThref = $ ("#next_page a"). attr ("href"); // scroll event $ $ (Fenster) .bind ("Scroll", Funktion () {// Bestimmen Sie, ob die Scrollbar des Fensters nahe am unteren Teil der Seite liegt, wenn (Dokument) .Scrolltop () + $ (Fenster). ist leer, wenn (nexHref! = undefiniert) {// ajax page drehen a "). attr (" href "); $ ("#page_nav a "). attr (" href ", nexHref);2. Flüssigkeitslayout zusätzlicher Inhalte
Kinderschuhe, die mit JQuery vertraut sind, sollten verstehen, dass JS nicht für Elemente funktioniert, die über AJAX in die Seite eingefügt wurden. Dies besteht jedoch nicht erforderlich, z. B. die Verwendung von Live (), da Mauerwerk eine ähnliche Verarbeitung in interner Verarbeitung erstellt und standardmäßig funktioniert.
$ newelems = $ result; $ newelems.imagesload (function () {$ container.masonry ('angehängt', $ newelems, true);});3. Ändern Sie den Ajax -Seite Drehenprozess
Im obigen Vorgang gibt es bereits ein komplettes Wasserfall -Flusslayout, aber es gibt keine Eingabeaufforderung während des Vorgangs der Seite, und das Einfügen mehrerer Bilder kann sich direkt auf die Benutzererfahrung auswirken. Daher müssen einige Änderungen an der Seite Drehung vorgenommen werden. Der vollständige Code ist unten angegeben.
Hier müssen Sie ein Element wie folgt hinzufügen, um zu fordern, dass neue Inhalte geladen werden oder dass die Eingabeaufforderung die letzte Seite erreicht hat.
<div id = "page_loading"> <span> Stromladeing ... </span> </div>
Entsprechende CSS
Die Codekopie lautet wie folgt:
#Page_loading {display: Keine; Hintergrund: #111111; Opazität: 0,7; Höhe: 60px; Breite: 220px; Polsterung: 10px; Position: absolut; unten: -50px; links: 330px; }
Unten finden Sie die vollständige AJAX -Seite, die Code drehen
nexThref = $ ("#next_page a"). attr ("href"); // scroll event $ $ (Fenster) .bind ("Scroll", Funktion () {// Bestimmen Sie, ob die Scrollbar des Fensters nahe am unteren Teil der Seite liegt, wenn (Dokument) .Scrolltop () + $ (Fenster). ist leer, wenn (NextHref! NexTref = $ (Daten) .Find ("#page_nav"). Attr ("href"); $ newelems.imagesload (function () {$ container.masonry ('angehängt', $ newelems, true); // Neue Inhalte in Fortschritt $ newelems.animate ({Opazität: 1}); // das Lademodul $ ("#page_loading"). Seite! "); $ ("#page_loading "). show (" fast "); setTimeout (" $ ('#page_loading'). hide () ", 1000); setTimeout (" $ ('#page_loading'). remy () ", 1100);}}});