AJAX는 폭포 흐름 레이아웃을 구현합니다.-PHP开发-php.cn

AJAX는 폭포 흐름 레이아웃을 구현합니다.

高洛峰

풀어 주다： 2017-01-03 10:39:03

원래의

1182명이 탐색했습니다.

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

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

먼저 이 예시에서 사용한 폭포수 흐름 방식에 대해 이야기해 보겠습니다. 폭포 흐름 레이아웃을 구현하는 방법에는 여러 가지가 있습니다. 자세한 내용은 Baidu에서 직접 검색할 수 있으므로 여기서는 자세히 설명하지 않겠습니다. 이 글의 폭포 흐름 구현 방법은 4열 레이아웃(li*4)이며, 각 그림은 배경에서 데이터를 읽은 후 상자(div>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 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>

로그인 후 복사

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

로그인 후 복사

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

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

로그인 후 복사

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

이 인스턴스의 동작은 서버에 따라 다르기 때문에 로컬에서 간단한 서버를 구축해야 한다는 점에 유의해야 합니다. WampService를 사용하면 빠르게 구축할 수 있습니다.

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

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

로그인 후 복사

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 또한 모든 사람들이 PHP 중국어를 지원하기를 바랍니다.

폭포 흐름 레이아웃의 AJAX 구현과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!