2.2-数据的分析及添加

2017-11-13 本文已影响5人小豌豆书吧

2-数据的分析及添加 25:12

从getPics.php文件中获取数据==>分析数据的格式==>
添加数据

一、分析数据的格式

瀑布流数据分析.gif

根据上图可以看出，data数据是一个数组（准确的说是字符串），包含50多条json形式的内容

二、添加数据

初始化数据处理：
通过ajax加载数据进来，加载进来后根据之前的分析，data是一个数组，数组里面有内容；

首先获取到数据，然后把数据一条一条的添加到页面中；

<ul id="ul1">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

现在有4个li，但我们不知道到底应该往哪个li里添加数据，添加有个条件：最短的一列li

怎么才能得到高度最小的li呢？

类比找数组中最小的一个是【5,6,3,1,2】

索引---值
0------5
1------6
2------3
3------1
4------2

首先拿6与5作比较，很明显6不小于5，不做任何改变；
3与5比较，3<5, 得到3，且获取其索引值2；
1与3做比较，1<3,得到1，且获取其索引值3；
2与1做比较，2≮1,还是1，且索引值为3。

封装一个函数以得到高度最小的li的索引值：

function getShort() {
  var index = 0;
  var ih = aLi[index].offsetHeight;
  for (var i=1;i<ilen;i++){
    if (aLi[i].offsetHeight < ih){
      index = i;
      ih = aLi[i].offsetHeight;
    }
  }
  return index; //得到高度最小的li的索引
}

逐条添加数据：

var oUl = document.getElementById("ul1");
var aLi = oUl.getElementsByTagName("li");
var iLen = aLi.length;

ajax("get","getPics.php","cpage=1",function(data){
  // alert(typeof data);//string
  var data = JSON.parse(data);
  for (var i=0;i<data.length;i++){
    //获取高度最短的li
    var _index = getShort();

    var oDiv = document.createElement("div");
    var oImg = document.createElement("img");
    oImg.src = data[i].preview;
    oDiv.appendChild(oImg);
    var oP = document.createElement("p");
    oP.innerHTML = data[i].title;
    oDiv.appendChild(oP);

    aLi[_index].appendChild(oDiv);
  }
});

注意：
得到的data是字符串，所以不要忘了解析,JSON.parse(data)即可。
图片加载完成后再加载下一张，否则前一批图片未加载完，高度未撑开，后面的又加载进来了 ==>

图片预加载
另外一种方法，是后端提供图片的宽度和高度

oImg = data[i].width + 'px';
oImg = data[i].height + 'px';

样式表中已经定义图片的宽度225px，所以得按比例设置图片的高度才能使得图片不变形，如下：

var oImg = document.createElement("img");
oImg.src = data[i].preview;
oImg.style.width = '225px';
oImg.style.height = (data[i].height * 225) / data[i].width + 'px';
oDiv.appendChild(oImg);

三、本案例1.pbl.html完整的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>瀑布流布局</title>
  <style type="text/css">
    body {margin: 0;}
    ul {width: 1080px; margin: 10px auto 0;}
    li {width: 247px;float: left;list-style:none;margin-right: 10px;}
    li div {border: 1px solid #000;padding:10px; margin-bottom: 10px;}
    li div img {width: 225px;display: block;}
  </style>
  <script type="text/javascript" src="ajax.js"></script>
  <script type="text/javascript">
  window.onload=function(){
    var oUl = document.getElementById("ul1");
    var aLi = oUl.getElementsByTagName("li");
    var iLen = aLi.length;

    // 初始化数据处理
    ajax("get","getPics.php","cpage=1",function(data){
      // alert(typeof data);//string
      var data = JSON.parse(data);
      for (var i=0;i<data.length;i++){
        //获取高度最短的li
        var _index = getShort();

        var oDiv = document.createElement("div");
        var oImg = document.createElement("img");
        oImg.src = data[i].preview;
        oImg.style.width = '225px';
        oImg.style.height = (data[i].height * 225) / data[i].width + 'px';
        oDiv.appendChild(oImg);
        var oP = document.createElement("p");
        oP.innerHTML = data[i].title;
        oDiv.appendChild(oP);

        aLi[_index].appendChild(oDiv);
      }
    });
    
    // 确定最短列的li
    function getShort() {
      var index = 0;
      var ih = aLi[index].offsetHeight;
      for (var i=1;i<iLen;i++){
        if (aLi[i].offsetHeight < ih){
          index = i;
          ih = aLi[i].offsetHeight;
        }
      }
      return index; //得到高度最小的li的索引
    }
  }

  </script>
</head>
<body>
  <ul id="ul1">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>
</html>

后台数据文件--getPic.php:

<?php
header('Content-type:text/html; charset="utf-8"');

/*
API:
    getPics.php

        参数
        cpage : 获取数据的页数
*/
$cpage = isset($_GET['cpage']) ? $_GET['cpage'] : 1; //默认是第1页

$url = 'http://www.wookmark.com/api/json/popular?page=' . $cpage;

$content = file_get_contents($url);
$content = iconv('gbk', 'utf-8', $content);

echo $content;

?>

四、数据分析及数据添加效果图展示：

瀑布流数据分析及数据添加.gif