AJAX implémente une disposition de flux en cascade-PHP开发-php.cn

AJAX implémente une disposition de flux en cascade

高洛峰

Libérer： 2017-01-03 10:39:03

original

1243 Les gens l'ont consulté

Le flux en cascade est actuellement une méthode de mise en page d'interface de site Web populaire. La disposition inégale sur plusieurs colonnes et le chargement automatique lorsque vous atteignez le bas améliorent considérablement l'expérience visuelle et utilisateur du site Web. 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 débit 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 du flux en cascade. Pour plus de détails, vous pouvez effectuer une recherche sur Baidu vous-même. Je n'entrerai 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 (div>img p). Après avoir lu les données de l'arrière-plan, elle est affectée aux éléments de la boîte. et la colonne avec la plus petite hauteur à ce moment est déterminée ( li), puis ajoutez la case à la colonne correspondante (li), puis effectuez 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 div{ 
        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(&#39;Microsoft.XMLHTTP&#39;); 
  } 
    
  if (method == &#39;get&#39; && data) { 
    url += &#39;?&#39; + data; 
  } 
    
  xhr.open(method,url,true); 
  if (method == &#39;get&#39;) { 
    xhr.send(); 
  } else { 
    xhr.setRequestHeader(&#39;content-type&#39;, &#39;application/x-www-form-urlencoded&#39;); 
    xhr.send(data); 
  } 
    
  xhr.onreadystatechange = function() { 
      
    if ( xhr.readyState == 4 ) { 
      if ( xhr.status == 200 ) { 
        success && success(xhr.responseText); 
        console.log(xhr.responseText); 
      } else { 
        alert(&#39;出错了,Err：&#39; + xhr.status); 
      } 
    } 
      
  } 
}

Copier après la connexion

La partie ajax est modifiée à partir 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(&#39;ul1&#39;); 
  var li = document.getElementsByTagName(&#39;li&#39;); 
  var liLen = li.length; 
  var page = 1; 
  var bool = false; 
  //调用接口获取数据 
  loadPage();//首次加载 
  /** 
   * 加载页面的函数 
   */
  function loadPage(){ 
    ajax(&#39;get&#39;, &#39;getPics.php&#39;, &#39;cpage=&#39;+page, function(data) { 
      //将数据库中获取的数据转换成数组形式，这里要根据数据库中的数据形式来写，这里我获取到的是json形式 
      var data = JSON.parse(data); 
      //将数据写入到div中 
      for(var i = 0; i < data.length; i++) { 
        var index = getShort(li);//查找最短的li 
        //创建新的节点：div>img+p 
        var div = document.createElement(&#39;div&#39;); 
        var img = document.createElement(&#39;img&#39;); 
        img.src = data[i].preview;//img获取图片地址 
        img.alt = "等着吧..."
        //根据宽高比计算img的高，为了防止未加载时高度太低影响最短Li的判断 
        img.style.height = data[i].height * (230 / data[i].width) + "px"; 
        div.appendChild(img); 
        var p = document.createElement(&#39;p&#39;); 
        p.innerHTML = data[i].title;//p获取图片标题 
        div.appendChild(p); 
        //加入到最短的li中 
        li[index].appendChild(div); 
      } 
      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 div 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 est à noter que le fonctionnement de cette instance dépend du serveur, vous devez donc construire un serveur simple localement. Vous pouvez utiliser WampService pour le 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

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de tout le monde. J'espère également que tout le monde prendra en charge PHP Chinese Net.

Pour plus d'articles liés à l'implémentation AJAX de la disposition des flux en cascade, veuillez faire attention au site Web PHP chinois !