Méthode AJAX pour implémenter la pagination déclenchant le flux en cascade et la pagination déclenchant le flux en cascade

Ce que l'on appelle l'effet de flux en cascade est similaire à l'effet de la page d'accueil du lit d'images lumineuses. Plusieurs colonnes avec un contenu similaire sont disposées de manière rapprochée, en essayant de minimiser les écarts entre les colonnes (c'est-à-dire une disposition fluide) et en tant que telles. la barre de défilement de la page défile vers le bas, les nouvelles données seront ajoutées à la fin de la page actuelle jusqu'à ce que toutes les données soient chargées (tournage de page Ajax déclenché par le défilement).

Le flux en cascade déclenche la pagination

Voici quelques idées, même si toutes ne peuvent pas être utilisées dans les exemples suivants :
En entrant dans l'écran, déterminez si le contenu est vide. Si ce n'est pas le cas, vide, commencez à initialiser les données.
2. Lorsque vous faites défiler l'écran vers le bas, déterminez la taille du bas des données et la hauteur de défilement de l'écran. Si le fond est inférieur à la somme des deux ci-dessus, redemandez l'interface, c'est-à-dire chargez les données.
3. Lorsque les données dépassent un certain nombre de pages, arrêtez de les charger ou affichez-les sous forme de pagination, cliquez pour afficher à nouveau le contenu.

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

Ce qui précède est un code relativement simple qui charge en permanence le contenu déroulant.

Le format JSON est similaire (s'il s'agit d'une interface dynamique, vous pouvez utiliser la fonction de rappel, il n'est donc pas nécessaire d'ajouter fill() ici) :

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

Ça devient que les rappels d'interface statique peuvent également être utilisés. Le traitement statique soulage considérablement la pression du serveur et accélère la génération de contenu, qui est une méthode de traitement nécessaire pour les sites Web à fort trafic.

La méthode ajax de jQuery implémente la pagination pour déclencher le flux en cascade

1 Obtenez le contenu de la page suivante via Ajax
Nous avons besoin d'une navigation avec la structure HTML suivante dans la page Web, next_link est. le suivant L'url d'une page.

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

Css correspondant

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

Le code suivant est obtenu via Ajax Une page de contenu et ajouté à la fin du contenu actuel.

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. Créez une mise en page fluide pour le contenu supplémentaire
Les enfants qui connaissent jQuery doivent comprendre que js est inséré dans la page via Ajax. L'élément ne fonctionne pas, mais il n'est pas nécessaire d'effectuer un traitement tel que l'utilisation de live() ici, car Masonry a déjà effectué un traitement similaire en interne et cela fonctionne par défaut, il vous suffit donc d'appeler masonry() dans le rappel. fonction après l'exécution réussie de la méthode Ajax).

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

3. Modifier le processus de tournage de page Ajax
Dans le processus ci-dessus, il existe déjà une disposition complète du flux en cascade, mais il n'y a aucune invite pendant le processus de tournage de page. De plus, l'insertion directe de plusieurs images peut affecter l'expérience utilisateur, certaines modifications doivent donc être apportées au processus de tournage de page. Le code complet est donné ci-dessous.
Vous devez ajouter ici l'élément suivant pour indiquer qu'un nouveau contenu est en cours de chargement ou que la dernière page a été atteinte.

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

Css correspondant

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

Ce qui suit est le code complet de tournage de page Ajax

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

Plus d'implémentation AJAX du flux en cascade Pour des articles connexes sur le déclenchement de la pagination et la pagination déclenchant le flux en cascade, veuillez faire attention au site Web PHP chinois !