Detailed explanation of the steps to implement waterfall flow layout with ajax (with code)-JS Tutorial-php.cn

This time I will bring you ajax implementationWaterfall flow layoutDetailed explanation of the steps (with code), what are the notes for ajax to implement waterfall flow layout, the following is a practical case, one Get up and take a look.

Waterfall flow is currently a popular website interface layout method. The uneven multi-column layout and the way of reaching the bottom automatic loading make the website visually and user-friendly. can be greatly improved. The first person to use this layout was the foreign picture website Pinterest. Later, some domestic picture websites also began to use the waterfall flow layout, including Huaban.com, the picture community Lofter, Meilishuo, Mogujie, etc., which are similar to Pinterest.

The layout of waterfall flow should be very simple for most people, with only a few columns. The most important thing about waterfall flow is asynchronous loading of data.

First let’s talk about the waterfall flow method used in this example. There are many ways to implement waterfall flow layout. For details, you can search on Baidu yourself, so I won’t go into details here. The waterfall flow implementation method in this article is a four-column layout (li*4). Each picture is a box (p>img p). After reading the data from the background, it is assigned to the elements in the box to determine the column with the smallest height at this time ( li), then add the box to the corresponding column (li), and then perform the next judgment, and so on until all data on this page is loaded.

Code part:

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>

Copy after login

javascript part: ajax part and implementation part

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

Copy after login

The ajax part is before The working principle of Ajax and the simple encapsulation of functions are modified. After understanding that, it is basically not difficult to read this. Compared with that one, this one has one more data parameter. Data is the page number used to read the 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; 
}

Copy after login

The function of this part is mainly to dynamically write the generated p to the page, which includes modification of the box style and writing of data. The data is obtained from the server through the ajax function.

It should be noted that the operation of this instance depends on the server, so a simple server needs to be built locally. WampService can be used to quickly build it.

The following is the PHP code of our data source:

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

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!