Le soi-disant effet de flux de cascade est comme l'effet de page d'accueil du lit de la carte lumineuse. Plusieurs colonnes avec un contenu similaire sont étroitement disposées, essayant de minimiser l'écart entre les colonnes (c'est-à-dire la disposition du fluide). Au fur et à mesure que la barre de défilement de la page défile vers le bas, de nouvelles données seront ajoutées à la fin de la page actuelle jusqu'à ce que toutes les données soient chargées (Page Ajax déclenchée par défilement).
Le débit de la cascade déclenche la pagination
Permettez-moi de parler de l'idée ici, bien que les exemples suivants ne puissent pas les utiliser tous:
1. Lors de la saisie de l'écran, déterminez si le contenu est vide. S'il n'est pas vide, commencez à initialiser les données.
2. Lorsque vous tirez vers le bas à l'écran, jugez le bas des données et la hauteur de l'écran + la hauteur de défilement. Si le fond est plus petit que la somme des deux ci-dessus, remettez-vous à l'interface, c'est-à-dire charger les données.
3. Lorsque les données dépassent un certain nombre de pages, arrêtez de le charger ou de les afficher sous forme de pagination et cliquez pour afficher le contenu.
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 = $ ("# chargement"); if (ul_select.length <1) return; var is_more = true; // cross-domain request function function loadjs (src, callback) {var jes = document.createetement ('script'); jsrc = src; js.OnreadyStateChange = js.Onload = function () {if (! jsreadystate || jsreadystate == 'chargé' || jsreadystate == 'complete') {if (callback) {callback () || callback}; }}; jscharset = "utf-8"; document.getElementsByTagName ('head') [0] .APPENDCHILD (JS);} // Fonction de callback Fonction Fill (Data) {if (data.pageCount == Data.pageno) {is_more = false; // si toutes les données sont chargées, annulent le chargement) $ ("# chargement"). html ("chargé");}} // résoudre la fonction d'interface queryIntf () {var url = page == 1? Intf_url + ". JSON": intf_url + "_ Pay" + page + ". chargé * / fonctionsedtoloadrb () {var btn_top = btn_more.offset (). top; var window_height = $ (window) .Height (); var scroll_top = $ (fenêtre) .scrollTop (); return btn_top <croll_top + window_height? true: false;} $ (window) .scroll (function () {var _needLoad = NeedToloAdrb (); if (_needLoad && isloadrb == false && is_more) {isloadrb = true; queryIntf ();}}) fenêtre. }Ce qui précède est un code d'idée relativement simple qui continue de se charger avec le contenu déroulant.
Le format JSON est similaire à (s'il s'agit d'une interface dynamique, vous pouvez utiliser la fonction de rappel, alors vous n'avez pas besoin d'ajouter Fill () ici):
remplissage ({"fans": [{"surnom": "Cai baojian", "site Web": "vevb.com", "youzhi": "2.5", "time": "3 minutes"}, {"surnom": "Cai baojian", "site": "Vevb.com", "youzhi": "2.5", "Time": "3 minutes", "youzhi": "2.5", "Time": "3 minutes", "Youzhi": "2.5", "Time": "3 minutes il y a "}, {" surnom ":" cai baojian "," site Web ":" vevb.com "," youzhi ":" 2.5 "," time ":" il y a 3 minutes "}, {" nautique ":" cai baojian "," we bsite ":" Vevb.com "," youzhi ":" 2.5 "," temporel ":" 3 il y a "}, {" surnom ":" Cai baojian "," site Web ":" vevb.com "," youzhi ":" 2.5 "," time ":" il y a 3 minutes "}, {" nickname ":" cai baojian "," site Web ":" Vevb.com "," youzhi ":" 2.5 "," fois ":" 3 procès CKNAME ":" Cai Baojian "," Site Web ":" Vevb.com "," Youzhi ":" 2.5 "," Time ":" il y a 3 minutes "}, {" surnom ":" Cai Baojian "," Site Web ":" Vevb.com "," Youzhi ":" 2.5 "," Time ":" 3 minutes il y a "}]," PageCount ": 2," Pageno ": 1," PageSize ": 10," totalSize ": 20});Il s'avère que les rappels d'interface statique peuvent également être utilisés. Grâce au traitement statique, la pression du serveur est grandement atténuée et la génération de contenu est accélérée, et c'est une méthode de traitement nécessaire pour les sites Web à grande échelle.
La méthode Ajax de JQuery implémente la pagination déclenchant un flux de cascade
1. Obtenez le contenu de la page suivante via Ajax
Nous avons besoin de navigation dans la page Web avec la structure HTML suivante, Next_link est l'URL de la page suivante.
<div id = "page_nav"> <a href = "next_link"> page suivante </a> </div>
CSS correspondant
#Page_Nav {Clear: les deux; Texte-aligne: Centre; }Le code suivant est d'obtenir le contenu de la page suivante via AJAX et de le ajouter à la fin du contenu actuel.
nexThref = $ ("# next_page a"). att ("href"); // windgroll event $ (window) .bind ("scroll", function () {// déterminer si la barre de scroll de la fenêtre est proche du bas de la page si ($ (document) .scrolltop () + $ (window). est vide if (nexThref! = Undefined) {// Ajax Page Turn $ .ajax ({url: $ ("# page_nav a"). att ("href"), type: "post", succès: fonction (data) {result = $ (data) .Find ("# thumbs .imgbox"); nexThref = $ (data) .Find ("# page_nav"); nexThref = $ (data) .Find ("# page_nav"); nexThref = $ (data) .find ("# page_nav"); nexThref = $ (Data) .Find ("# page_nav a "). att (" href "); $ (" # page_nav a "). att (" href ", nexThref); $ (" # thumbs "). append (result);}});} else {$ (" # page_nav "). remove ();}}});2. Disposition fluide de contenu supplémentaire
Les chaussures pour enfants familières avec jQuery doivent comprendre que JS ne fonctionne pas pour les éléments insérés dans la page via Ajax, mais il n'est pas nécessaire de le faire, comme l'utilisation de Live (), car la maçonnerie a effectué un traitement similaire en interne et fonctionne par défaut, vous n'avez donc qu'à appeler la méthode de maçonnerie () dans la fonction de rappel après que Ajax soit exécuté avec succès.
$ newelems = $ result; $ newelems.imageslowed (function () {$ contener.masonry ('annexe', $ newelems, true);});3. Modifiez le processus de virage de la page Ajax
Il y a déjà une disposition complète du débit de cascade dans le processus ci-dessus, mais il n'y a pas d'invite pendant le processus de virage de la page, et l'insertion de plusieurs images peut affecter directement l'expérience utilisateur, donc certaines modifications doivent être apportées au processus de virage de la page. Le code complet est donné ci-dessous.
Ici, vous devez ajouter un élément comme suit pour inviter que le nouveau contenu est chargé ou que l'invite a atteint la dernière page.
<div id = "page_loking"> <span> chargement d'alimentation ... </span> </div>
CSS correspondant
La copie de code est la suivante:
#Page_Loading {affichage: aucun; Contexte: # 111111; Opacité: 0,7; hauteur: 60px; Largeur: 220px; rembourrage: 10px; Position: absolue; En bas: -50px; Gauche: 330px; }
Vous trouverez ci-dessous le code de virage complet de la page Ajax
nexThref = $ ("# next_page a"). att ("href"); // windgroll event $ (window) .bind ("scroll", function () {// déterminer si la barre de scroll de la fenêtre est proche du bas de la page si ($ (document) .scrolltop () + $ (window). est vide if (nexThref! = Undefined) {// Afficher le module de chargement $ ("# page_loade"). Show ("Slow"); nexThref = $ (data) .find ("# page_nav a"). att ("href"); $ newelems.imageslowed (function () {$ contener.masonry ('annexé', $ newelems, true); // affiche de nouveaux contenus dans le module de chargement $ ("# Page_loading"). Hide ("Slow");}}); Dernière page! "); $ (" # page_loking "). Show (" Fast "); setTimeout (" $ ('# page_loking'). Mide () ", 1000); setTimeout (" $ ('# page_loking'). Supprime () ", 1100);}}});