El llamado efecto de flujo de cascada es como el efecto de página de inicio del lecho de mapa de luz. Múltiples columnas con contenido similar están estrechamente dispuestas, tratando de minimizar la brecha entre las columnas (es decir, diseño de fluido). A medida que la barra de desplazamiento de la página se desplaza hacia abajo, se agregarán nuevos datos al final de la página actual hasta que se carguen todos los datos (giro de la página AJAX activado por desplazamiento).
El flujo de cascada desencadena la paginación
Permítanme hablar sobre la idea aquí, aunque los siguientes ejemplos no se pueden usar todos:
1. Al ingresar a la pantalla, determine si el contenido está vacío. Si no está vacío, comience a inicializar los datos.
2. Al bajar hacia la pantalla, juzgue la parte inferior de los datos y la altura de la pantalla + la altura de desplazamiento. Si la parte inferior es más pequeña que la suma de los dos anteriores, vuelva a solicitar la interfaz, es decir, cargue los datos.
3. Cuando los datos excedan un cierto número de páginas, deje de cargarlo o mostrarlos en forma de paginación, y haga clic para mostrar el contenido.
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 = $ ("#carging"); if (ul_select.length <1) return; var is_more = true; // interfaz de solicitud de interfaz de dominio loadjs (src, devocation) {var js = document.createElement ('script'); js.src = src; js.OnreadyStateChange = js.onload = function () {if (! jsadyState || jsadyState == 'cargado' || js.readyState == 'completo') {if (callback) {llamado () || devolución de llamada}; }}; js.charset = "utf-8"; document.getElementsByTagName ('head') [0] .AppendChild (js);} // función de devolución de llamada relleno (data) {if (data.pageCount == data.pageno) {is_more = falso; // Si todos los datos están cargados, cancelen la carga de la carga de la carga, la carga de la carga. $ ("#carging"). html ("cargado");}} // Resuelve la función de interfaz QuereIntf () {var url = page == 1? intf_url+". json": intf_url+"_ página"+página+". json"; loadjs (url, devolución de llamada);} Función de llamada () {Page++;} cargado*/function Needtoloadrb () {var btn_top = btn_more.offset (). top; var window_height = $ (ventana) .Height (); var scroll_top = $ (ventana) .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 () }Lo anterior es un código de ideas relativamente simple que sigue cargando con el contenido desplegable.
El formato JSON es similar a (si se trata de una interfaz dinámica, puede usar la función de devolución de llamada, entonces no necesita agregar relleno () aquí):
relleno ({"fans": [{"apodo": "cai baojian", "sitio web": "Vevb.com", "Yoezhi": "2.5", "Tiempo": "Ago 3 minutos"}, {"Nombre": "Cai Baojian", "Sitio web": "Vevb.com", "YouZhi": "2.5", "," Minutos ":" Time 3 minutos ":" Time 3 minutos: "Time 3 Hace "}, {" Nombre ":" Cai Baojian "," Sitio web ":" VEVB.com "," Yoezhi ":" 2.5 "," Tiempo ":" Ago 3 minutos "}, {" Nombre ":" Cai baojiano "," We Bsite ":" Vevb.com "," YouZhi ":" 2.5 "," Time ":" 3 minutos ":" 3 minutos ":" 3 minutos ":" 3 minutos ":" Tiempo ":" 3 minutos ":" 3 minutos ":" Tiempo ":" 3 minutos ":" Tiempo ":" 3 minutos ":" Tiempo ":" 3 Minter 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"},{"ni Ckname ":" Cai Baojian "," Sitio web ":" Vevb.com "," Yoezhi ":" 2.5 "," Tiempo ":" Hace 3 minutos "}, {" Apodo ":" Cai Baoj "," Sitio web ":" Vevb.com "," Youzhi ":" 2.5 "," Time ":" 3 minutos Hace "}]," PageCount ": 2," Pageno ": 1," PageSize ": 10," TotalSize ": 20});Resulta que también se pueden usar devoluciones de llamada de interfaz estática. A través del procesamiento estático, la presión del servidor se alivia enormemente y la generación de contenido se acelera, y es un método de procesamiento necesario para sitios web a gran escala.
El método AJAX de JQuery implementa la paginación que desencadena el flujo de cascada
1. Obtenga el contenido de la página siguiente a través de AJAX
Necesitamos navegación en la página web con la siguiente estructura HTML, Next_link es la URL de la página siguiente.
<div id = "page_nav"> <a href = "next_link"> página siguiente </a> </div>
CSS correspondiente
#page_nav {claro: ambos; Text-Align: Center; }El siguiente código es obtener el contenido de la página siguiente a través de AJAX y agregarlo al final del contenido actual.
nexThref = $ ("#next_page a"). attr ("href"); // bind scroll event $ (ventana) .bind ("scroll", function () {// determinar si la barra de desplazamiento de la ventana está cerca de la parte inferior de la página if ($ (documento) .scroltop () + $ (ventana) .Height ()> $ (documento) .Height () - 10) { El enlace de página está vacío if (nexthref! = Undefined) {// Ajax Page Turn $ .AJAX ({url: $ ("#page_nav a"). attr ("href"), type: "post", éxito: function (data) {result = $ (data) .find ("#thumbs .imgbox"); nexthref = $ (data) .find ("#page). A ").2. Diseño fluido de contenido adicional
Los zapatos para niños familiarizados con JQuery deben comprender que JS no funciona para elementos insertados en la página a través de AJAX, pero no hay necesidad de hacer esto, como usar Live (), porque la mampostería ha realizado un procesamiento similar internamente y funciona de manera predeterminada, por lo que solo necesita llamar al método Masonry () en la función de devolución de call después de que AJAX se ejecute con éxito.
$ newelems = $ resultado; $ newelems.imageSloaded (function () {$ contenedor.masonry ('appended', $ newelems, true);});3. Modifique el proceso de cambio de página AJAX
Ya hay un diseño completo de flujo de cascada en el proceso anterior, pero no hay un mensaje durante el proceso de cambio de página, e insertar múltiples imágenes directamente puede afectar la experiencia del usuario, por lo que se deben realizar algunas modificaciones al proceso de cambio de página. El código completo se proporciona a continuación.
Aquí debe agregar un elemento de la siguiente manera para solicitar que se está cargando nuevo contenido o que el aviso ha llegado a la última página.
<div id = "page_loading"> <span> Carga de potencia ... </span> </div>
CSS correspondiente
La copia del código es la siguiente:
#page_loading {display: none; Antecedentes: #111111; Opacidad: 0.7; Altura: 60px; Ancho: 220px; relleno: 10px; Posición: Absoluto; Abajo: -50px; Izquierda: 330px; }
A continuación se muestra el código completo de giro de la página AJAX
nexThref = $ ("#next_page a"). attr ("href"); // bind scroll event $ (ventana) .bind ("scroll", function () {// determinar si la barra de desplazamiento de la ventana está cerca de la parte inferior de la página if ($ (documento) .scroltop () + $ (ventana) .Height ()> $ (documento) .Height () - 10) { El enlace de la página está vacío if (nexthref! = Undefined) {// Mostrar el módulo de carga $ ("#page_loading"). show ("lento"); .ImgBox "); nexThref = $ (data) .find ("#page_nav a "). attr (" href "); $ ("#page_nav a "). attr (" href ", nexThref); $ ("#pulbos "). APPEND (APPEND (APPEND); / Establezca el nuevo contenido en transparente $ Newelems = Result.css ({Result); $ Newelems.ImageSloaded (function () {$ Container.Masonry ('appended', $ newelems, true); // Mostrar nuevos contenidos en progreso $ newelems.animate ({opacity: 1}); // ocultar el módulo de carga $ ("#page_loading"). Hide ("lento");}); Última página! "); $ ("#page_loading "). show (" fast "); setTimeOut (" $ ('#page_loading'). Hide () ", 1000); setTimeOut (" $ ('#page_loading'). remove () ", 1100);}}});