So implementieren Sie den Wasserfallfluss mit AJAX-js-Tutorial-php.cn

Dieses Mal zeige ich Ihnen, wie Sie AJAX zum Implementieren des Wasserfallflusses verwenden und welche Vorsichtsmaßnahmen es gibt, um AJAX zum Implementieren des Wasserfallflusses zu verwenden. Nachfolgend sehen Sie einen praktischen Fall.

Wasserfallfluss ist derzeit eine beliebte Methode für das Layout der Website-Oberfläche und die Art und Weise, wie der untere Teil automatisch geladen wird, kann die Website optisch und benutzerfreundlich gestalten verbessert. Die erste Person, die dieses Layout verwendete, war die ausländische Bilder-Website Pinterest. Später begannen auch einige inländische Bilder-Websites, das Wasserfall-Flow-Layout zu verwenden, darunter Huaban.com, die Bilder-Community Lofter, Meilishuo, Mogujie usw ., die Pinterest ähneln.

Das Layout des Wasserfallflusses dürfte für die meisten Menschen sehr einfach sein, mit nur wenigen Spalten. Das Wichtigste am Wasserfallfluss ist das asynchrone Laden von Daten.

Lassen Sie uns zunächst über die in diesem Beispiel verwendete Wasserfall-Flow-Methode sprechen. Es gibt viele Möglichkeiten, das Wasserfall-Flow-Layout zu implementieren. Sie können selbst auf Baidu suchen. Ich werde hier nicht näher darauf eingehen. Die Implementierungsmethode des Wasserfallflusses in diesem Artikel ist ein vierspaltiges Layout (li*4). Nach dem Lesen der Daten aus dem Hintergrund wird es den Elementen im zugewiesen Bestimmen Sie die Spalte mit der kleinsten Höhe zu diesem Zeitpunkt (li), fügen Sie dann die Box zur entsprechenden Spalte (li) hinzu und treffen Sie dann die nächste Beurteilung usw., bis alle Daten auf dieser Seite geladen sind.

Codeteil:

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>

Nach dem Login kopieren

Javascript-Teil: Ajax-Teil und Implementierungsteil

/** 
 * 
 * @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); 
      } 
    } 
     
  } 
}

Nach dem Login kopieren

Der Ajax-Teil basiert auf dem Arbeitsprinzip von Ajax und der einfachen Kapselung zuvor geschriebener Funktionen. Nachdem man das verstanden hat, ist es im Grunde nicht schwer, dies zu erkennen. Im Vergleich zu diesem hat dieser einen weiteren Datenparameter. Daten sind die Seitennummer, die zum Lesen der Daten verwendet wird.

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

Nach dem Login kopieren

Die Funktion dieses Teils besteht hauptsächlich darin, das generierte p dynamisch auf die Seite zu schreiben, was die Änderung des Boxstils und das Schreiben von Daten umfasst. Die Daten werden vom Server über die Ajax-Funktion abgerufen.

Es ist zu beachten, dass der Betrieb dieser Instanz vom Server abhängt. Daher muss zum schnellen Erstellen ein einfacher Server lokal erstellt werden.

Das Folgende ist der PHP-Code unserer Datenquelle:

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

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie hier Weitere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Ajax+PHP-Dateninteraktionsimplementierung

So implementieren Sie eine Ajax-Schleife

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Wasserfallfluss mit AJAX. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!