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
网友评论