집 > 기사 > 웹 프론트엔드 > AJAX를 사용하여 폭포수 흐름을 구현하는 방법

AJAX를 사용하여 폭포수 흐름을 구현하는 방법

php中世界最好的语言원래의: 2018-04-03 13:43:481871검색

이번에는 AJAX를 사용하여 Waterfall 흐름을 구현하는 방법과 AJAX를 사용하여 Waterfall 흐름을 구현할 때 주의 사항이 무엇인지 보여 드리겠습니다. 다음은 실제 사례입니다.

폭포 흐름은 현재 널리 사용되는 웹 사이트 인터페이스 레이아웃 방법입니다. 고르지 않은 다중 열 레이아웃과 하단에 도달할 때의 자동 로딩 방법은 웹 사이트의 시각적 및 사용자 경험을 크게 향상시킵니다. 이 레이아웃을 처음 사용한 사람은 외국 사진 웹사이트인 Pinterest였습니다. 이후 Huaban.com, 사진 커뮤니티 Lofter, Meilishuo, Mogujie 등을 포함한 일부 국내 사진 웹사이트에서도 폭포 흐름 레이아웃을 사용하기 시작했습니다. 핀터레스트와 비슷합니다.

폭포 흐름의 레이아웃은 대부분의 사람들에게 몇 개의 열만으로 매우 단순해야 합니다. 폭포수 흐름에서 가장 중요한 것은 데이터의 비동기 로딩입니다.

먼저 이 예시에서 사용된 폭포수 흐름 방식에 대해 이야기해 보겠습니다. 폭포 흐름 레이아웃을 구현하는 방법에는 여러 가지가 있습니다. 자세한 내용은 Baidu에서 직접 검색할 수 있습니다. 여기서는 자세히 설명하지 않겠습니다. 이 기사에서 폭포 흐름의 구현 방법은 4열 레이아웃(li*4)입니다. 각 그림은 배경에서 데이터를 읽은 후 상자(p>img+p)입니다. 상자를 사용하여 이때 높이가 가장 작은 열(li)을 결정하고 해당 열(li)에 상자를 추가한 후 다음 판단을 내리는 식으로 이 페이지의 모든 데이터가 로드됩니다.

코드 부분:

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>

javascript 부분: ajax 부분 및 구현 부분

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

ajax 부분은 이전에 작성한 Ajax의 작동 원리와 간단한 함수의 캡슐화를 수정한 것입니다. 기본적으로 이것을 보는 것은 어렵지 않습니다. 이것에 비해 데이터 매개변수가 하나 더 있습니다. Data는 데이터를 읽는 데 사용되는 페이지 번호입니다.

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

이 부분의 기능은 주로 생성된 p를 페이지에 동적으로 쓰는 것입니다. 여기에는 상자 스타일 수정 및 데이터 쓰기가 포함됩니다. 데이터는 ajax 기능을 통해 서버에서 가져옵니다.

이 인스턴스의 작동은 서버에 따라 달라지므로 간단한 서버를 로컬로 구축해야 WampService를 사용하여 빠르게 구축할 수 있습니다.

다음은 데이터 소스의 PHP 코드입니다.

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

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!