O chamado efeito de fluxo em cascata é como o efeito da página inicial do leito do mapa de luz. Várias colunas com conteúdo semelhante são organizadas de perto, tentando minimizar a lacuna entre as colunas (ou seja, layout de fluido). À medida que a barra de rolagem da página rola para baixo, novos dados serão adicionados ao final da página atual até que todos os dados sejam carregados (turno da página Ajax acionada por rolagem).
O fluxo em cascata desencadeia a paginação
Deixe -me falar sobre a ideia aqui, embora os seguintes exemplos não possam ser usados todos eles:
1. Ao entrar na tela, determine se o conteúdo está vazio. Se não estiver vazio, comece a inicializar os dados.
2. Ao puxar para a tela, julgue a parte inferior dos dados e a altura da tela + a altura da rolagem. Se a parte inferior for menor que a soma dos dois acima, reinicie a interface, ou seja, carregue os dados.
3. Quando os dados excederem um certo número de páginas, pare de carregá -los ou exibi -los em forma de paginação e clique para exibir o conteúdo.
var intf_url = "http://vevb.com/intf"; var pathurl = "http://vevb.com/"; var ul_Select = $ ("#fãslist"); var btn_more = $ ("#carregamento"); if (ul_select.Length <1) return; var is_more = true; // função de interface de solicitação de cross-domain (src, chamada) {var js = document.createElement ('script'); js.src = src; js.onReadyStateChange = js.onLoad = function () {if (! }}; js.charset = "utf-8"; document.getElementsByTagName ('head') [0] .appendChild (js);} // função de retorno de chamada preenchimento (data) {if (data.pageCount == data.pageno) {is_more = false; $ ("#carregamento"). html ("carregado");}} // Resolva a função de interface queryIntf () {var url = página == 1? intf_url+". carregado*/função necessitToloadrb () {var btn_top = btn_more.offset (). top; var window_height = $ (janela) .Height (); var scroll_top = $ (janela) .scrolltop (); retornar btn_top <scroll_top+window_height? true: false;} $ (window) .scroll (function () {var _needload = necessittoloadrb (); if (_needload && isloadrb == false && is_more) {isloadrb = true; quyIntf (); }O acima é um código de idéia relativamente simples que continua carregando com o conteúdo suspenso.
O formato JSON é semelhante (se for uma interface dinâmica, você pode usar a função de retorno de chamada, então não precisa adicionar preenchimento () aqui):
preencha ({"fãs": [{"apelido": "Cai Baojian", "Site": "Vevb.com", "Youzhi": "2.5", "Time": "3 minutos atrás"}, {"apelido": "Cai Baojian" "": "VEVB.com" "zh "" ":" CAI Baojian "" ":" Vevb.com ""zh" ". atrás "}, {" apelido ":" Cai Baojian "," Site ":" Vevb.com "," Youzhi ":" 2.5 "," Time ":" 3 minutos atrás "}, {" apelido ":" CAI Baojian "," Bsite ":" Vevb.com "," ":" Cai Baojian "," Bsite ":" Vevb.com ", "zh": "Cai Baojian", "Bsite": "Vevb.com", "zhi ": 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 "," Site ":" vevb.com "," youzhi ":" 2.5 "," time ":" 3 minutos atrás "}, {" apelido ":" Cai Baojian "," Site ":" Vevb.com "," Youzhi ":" 2.5 "," Time "" Time "": "3 minutos": "vevb.com", "Youzhi": "2.5", "Time" "Time" ":" 3 minutos ":" vevb.com "," Youzhi ":" 2.5 "," Time "" Time "": "Time" ":" VEVB.com "," atrás "}]," PageCount ": 2," Pageno ": 1," PageSize ": 10," Totalsize ": 20});Acontece que os retornos de chamada da interface estática também podem ser usados. Através do processamento estático, a pressão do servidor é bastante aliviada e a geração de conteúdo é acelerada e é um método de processamento necessário para sites em larga escala.
O método Ajax de JQuery implementa o fluxo de cachoeira de desencadeamento da paginação
1. Obtenha o conteúdo da próxima página através do Ajax
Precisamos de navegação na página da web com a seguinte estrutura HTML, Next_link é o URL da próxima página.
<div id = "page_nav"> <a href = "next_link"> próxima página </a> </div>
CSS correspondente
#page_nav {clear: ambos; Alinhamento de texto: centro; }O código a seguir é obter o conteúdo da próxima página através do Ajax e anexá -lo ao final do conteúdo atual.
nexthref = $ ("#next_page a"). att ("href"); // vinte o evento de rolagem $ (janela) .bind ("scroll", function () {// determinar se o scrollBar da janela está próximo da parte inferior da página se ($ ($). está vazio se (nexthref! = indefinido) {// ajax página gira $ .ajax ({url: $ ("#page_nav a"). att ("href"), type: "post", sucess: function (dados) {resultado = $ (data) .find ("#thumbs. a "). Att (" href "); $ ("#page_nav a "). Att (" href ", nexthref); $ ("#polegares "). Appender (resultado);}});} else {$ ("#Page_nav "). Remover ();}}});2. Layout de fluido de conteúdo adicional
Os sapatos infantis familiarizados com o jQuery devem entender que o JS não funciona para elementos inseridos na página através do Ajax, mas não há necessidade de fazer isso, como o uso do Live (), porque a alvenaria fez processamento semelhante internamente e funciona por inadimplência, portanto, você só precisa chamar o método de alvenaria () na função de retorno de chamada após o AJAX.
$ newElems = $ resultado; $ newElems.ImagesLoaded (function () {$ container.masonry ('anexado', $ newelems, true);});3. Modifique o processo de torneamento da página do Ajax
Já existe um layout completo de fluxo em cascata no processo acima, mas não há aviso prévio durante o processo de giro de página e a inserção de várias imagens diretamente pode afetar a experiência do usuário; portanto, são necessárias algumas modificações no processo de giro da página. O código completo é fornecido abaixo.
Aqui você precisa adicionar um elemento como segue solicita que o novo conteúdo esteja sendo carregado ou que o prompt chegou à última página.
<div id = "page_loading"> <pan> Carregamento de energia ... </span> </div>
CSS correspondente
A cópia do código é a seguinte:
#page_loading {display: Nenhum; Antecedentes: #111111; Opacidade: 0,7; Altura: 60px; Largura: 220px; preenchimento: 10px; Posição: Absoluto; Inferior: -50px; Esquerda: 330px; }
Abaixo está o código de giro completo da página Ajax
nexthref = $ ("#next_page a"). att ("href"); // vinte o evento de rolagem $ (janela) .bind ("scroll", function () {// determinar se o scrollBar da janela está próximo da parte inferior da página se ($ ($). está vazio se (nexthref! = indefinido) {// Mostrar o módulo de carregamento $ ("#Page_loading"). Show ("Slow"); nexthref = $ (dados) .Find ("#Page_NAV A"). Att ("href"); $ newElems.ImagesLoaded (function () {$ container.masonry ('Anevado', $ newelems, true); // Mostra novos conteúdos em progresso $ newElems.animate ({opacia: 1}); última página! "); $ ("#page_loading "). show (" rápido "); setTimeout (" $ ('#page_loading'). hide () ", 1000); setTimeout (" $ ('#page__loading'). remover () ", 1100);}}}});