Explication détaillée des étapes pour implémenter la disposition du flux en cascade avec ajax (avec code)-js tutoriel-php.cn

Explication détaillée des étapes pour implémenter la disposition du flux en cascade avec ajax (avec code)

php中世界最好的语言

Libérer： 2018-04-25 15:49:52

original

1639 Les gens l'ont consulté

Cette fois, je vais vous apporter une explication détaillée des étapes pour implémenter ajaxdisposition du flux en cascade (avec code). Quelles sont les précautions pour qu'ajax implémente la disposition du flux en cascade ? Ce qui suit est un cas pratique. Levez-vous et jetez un œil.

Le flux en cascade est actuellement une méthode de mise en page d'interface de site Web populaire. La disposition inégale de plusieurs colonnes et la manière d'atteindre le bas chargement automatique rendent le site Web visuellement et convivial. amélioré. La première personne à utiliser cette mise en page a été le site Web d'images étranger Pinterest. Plus tard, certains sites Web d'images nationaux ont également commencé à utiliser la mise en page en cascade, notamment Huaban.com, la communauté d'images Lofter, Meilishuo, Mogujie, etc., qui sont similaires à Pinterest.

La disposition du flux de la cascade devrait être très simple pour la plupart des gens, avec seulement quelques colonnes. La chose la plus importante à propos du flux en cascade est le chargement asynchrone des données.

Tout d’abord, parlons de la méthode d’écoulement en cascade utilisée dans cet exemple. Il existe de nombreuses façons de mettre en œuvre la disposition des flux en cascade. Pour plus de détails, vous pouvez effectuer une recherche sur Baidu vous-même, je n'entrerai donc pas dans les détails ici. La méthode d'implémentation du flux en cascade dans cet article est une disposition à quatre colonnes (li*4). Chaque image est une boîte (p>img+p). Après avoir lu les données en arrière-plan, elle est attribuée aux éléments du fichier. case pour déterminer la colonne avec la plus petite hauteur à ce moment-là (li), puis ajoutez la case à la colonne correspondante (li), puis faites le jugement suivant, et ainsi de suite jusqu'à ce que toutes les données de cette page soient chargées.

Partie code :

html+css

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title>瀑布流布局</title> 
    <style type="text/css"> 
      *{ 
        margin: 0; 
        padding: 0; 
      } 
      ul{ 
        width: 1200px; 
        margin: 0 auto; 
      } 
      ul li{ 
        float: left; 
        width: 250px; 
        list-style: none; 
        margin: 20px; 
      } 
      ul li p{ 
        width: 250px; 
        margin-bottom: 20px; 
        padding: 10px; 
        box-sizing: border-box; 
        border-radius: 5px; 
        box-shadow: 2px 2px 10px #919B9C; 
      } 
      ul li img{ 
        width: 100%; 
        margin-bottom: 10px; 
      } 
      ul li p{ 
        font-family: "microsoft yahei"; 
        font-size: 14px; 
      } 
    </style> 
    <script src="ajax.js" type="text/javascript" charset="utf-8"></script> 
    <script src="pubuliu.js" type="text/javascript" charset="utf-8"></script> 
  </head> 
  <body> 
    <ul id="ul1"> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
    </ul> 
  </body> 
</html>

Copier après la connexion

partie javascript : partie ajax et partie implémentation

/** 
 * 
 * @param {Object} method get和post方式 
 * @param {Object} url 文件路径 
 * @param {Object} data 页码 
 * @param {Object} success 成功的函数 
 */ 
function ajax(method, url, data, success) { 
  var xhr = null; 
  try { 
    xhr = new XMLHttpRequest(); 
  } catch (e) { 
    xhr = new ActiveXObject('Microsoft.XMLHTTP'); 
  } 
   
  if (method == 'get' && data) { 
    url += '?' + data; 
  } 
   
  xhr.open(method,url,true); 
  if (method == 'get') { 
    xhr.send(); 
  } else { 
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); 
    xhr.send(data); 
  } 
   
  xhr.onreadystatechange = function() { 
     
    if ( xhr.readyState == 4 ) { 
      if ( xhr.status == 200 ) { 
        success && success(xhr.responseText); 
        console.log(xhr.responseText); 
      } else { 
        alert('出错了,Err：' + xhr.status); 
      } 
    } 
     
  } 
}

Copier après la connexion

La partie ajax est modifiée sur la base du principe de fonctionnement d'Ajax et de la simple encapsulation des fonctions écrites auparavant. Après avoir compris cela, il n'est fondamentalement pas difficile de voir cela. Par rapport à celui-ci, celui-ci a un paramètre de données supplémentaire. Data est le numéro de page utilisé pour lire les données.

window.onload = function() { 
  //获取界面节点 
  var ul = document.getElementById('ul1'); 
  var li = document.getElementsByTagName('li'); 
  var liLen = li.length; 
  var page = 1; 
  var bool = false; 
  //调用接口获取数据 
  loadPage();//首次加载 
  /** 
   * 加载页面的函数 
   */ 
  function loadPage(){ 
    ajax('get', 'getPics.php', 'cpage='+page, function(data) { 
      //将数据库中获取的数据转换成数组形式，这里要根据数据库中的数据形式来写，这里我获取到的是json形式 
      var data = JSON.parse(data); 
      //将数据写入到p中 
      for(var i = 0; i < data.length; i++) { 
        var index = getShort(li);//查找最短的li 
        //创建新的节点：p>img+p 
        var p = document.createElement('p'); 
        var img = document.createElement('img'); 
        img.src = data[i].preview;//img获取图片地址 
        img.alt = "等着吧..." 
        //根据宽高比计算img的高，为了防止未加载时高度太低影响最短Li的判断 
        img.style.height = data[i].height * (230 / data[i].width) + "px"; 
        p.appendChild(img); 
        var p = document.createElement('p'); 
        p.innerHTML = data[i].title;//p获取图片标题 
        p.appendChild(p); 
        //加入到最短的li中 
        li[index].appendChild(p); 
      } 
      bool = true;//加载完成设置开关，用于后面判断是否加载下一页 
    }); 
  } 
   
  window.onscroll = function (){ 
    var index = getShort(li); 
    var minLi = li[index]; 
    var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; 
     
    if(minLi.offsetHeight+minLi.offsetTop<scrollTop+document.documentElement.clientHeight){ 
      //开关为开，即上一页加载完成，才能开始加载 
      if(bool){ 
        bool = false; 
        page++; 
        loadPage(); 
      } 
    } 
  } 
 
} 
/** 
 * 获取数组中高度最小的索引 
 * @param {Object} li 数组 
 */ 
function getShort(li) { 
  var index = 0; 
  var liHeight = li[index].offsetHeight; 
  for(var i = 0; i < li.length; i++) { 
    if(li[i].offsetHeight < liHeight) { 
      index = i; 
      liHeight = li[i].offsetHeight; 
    } 
  } 
  return index; 
}

Copier après la connexion

La fonction de cette partie est principalement d'écrire dynamiquement le p généré sur la page, ce qui inclut la modification du style de la boîte et l'écriture des données. Les données sont obtenues du serveur via la fonction ajax.

Il convient de noter que le fonctionnement de cette instance dépend du serveur, un simple serveur doit donc être construit localement. WampService peut être utilisé pour la construire rapidement.

Ce qui suit est le code PHP de notre source de données :

<?php 
header(&#39;Content-type:text/html; charset="utf-8"&#39;); 
 
/* 
API: 
  getPics.php 
 
    参数 
    cpage : 获取数据的页数 
*/ 
$cpage = isset($_GET[&#39;cpage&#39;]) ? $_GET[&#39;cpage&#39;] : 1; 
 
$url = &#39;http://www.wookmark.com/api/json/popular?page=&#39; . $cpage; 
 
$content = file_get_contents($url); 
$content = iconv(&#39;gbk&#39;, &#39;utf-8&#39;, $content); 
 
echo $content; 
 
?>

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention à. d'autres articles connexes sur le site PHP chinois !

Lecture recommandée :

Explication détaillée des principes et des cas d'implémentation de JSONP

Explication détaillée de l'utilisation de la file d'attente de requêtes AJAX

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!