初学者在某课堂学习ajax的过程中，有做一个瀑布流形式的小实例，为了加深理解知识点，因此把做实例的过程记录下来。
首先要实现的页面的最终样式是这样的：
最终效果图效果：
1.四列布局，每列等宽；
2.每一列内的每一个包含文字和图片的块的高度是不一样的，由内容确定，因此看起来是交错的；
3.一次加载的页面是有限的，当翻滚到底部时才会继续加载下一页。
现在要求已经明确了，那么开始工作：
一、工具和环境
HBuilder、Google浏览器、wampserver服务器环境、一个php数据文件。
二、页面布局
因为本实例只做瀑布流效果，因此布局比较简单：
最终页面结构
这就是大体页面结构，因为li里的内容会是动态变化的，因此通过javascript来动态添加添加，但是为了方便编写样式，因此先添加一点内容，之后再删除：
添加li的内容
css样式
下图就是初步效果图，可以看到分为四列，高度不一，而后面的单个图片我是通过在li中添加div来实现的，因此整个页面总共就只有四列。看到了效果后，把所有的div删掉，接下来编写JavaScript，通过js来动态生成内容。
初步效果图
三、JS部分
js部分主要需要实现的功能有一下几个部分：
1.动态生成页面结构：其中，用来生成页面结构的所有数据都是有php文件形式的，因此需要用到ajax来获取数据，然后再对数据进行处理，生成页面结构，因为有的div内容不一样，高度不相同，为了防止有的li越来越长，而有的却较短，因此页面中的每一个新的div都会接在最短的li中，这样整个页面就会较为均衡的向下添加内容；
2.实现滚动加载效果：在前面的的基础上通过ajax实现动态加载。
1.生成页面结构
首先，获得页面上的元素
然后获取php文件中的数据，数据格式是这样的
这里通过一个封装好的函数来进行获取：
获取数据函数因为ajax中get方式和post方式获取数据的方法不同，因此需要进行一些判断处理，另外数据的处理是通过一个函数来进行处理，然后调用ajax函数：
处理数据ajax函数得到的会是一大串类似JSON格式的字符串，因此通过JSON对象的parse方法把数据转为json对象，这样方便利使用。这里获取到的只是第一页的数据，接下来，就在这个处理函数中生成页面结构：
生成页面架构
这部分代码就写在上文的后面，其中还用到了一个函数getShort(),用来获取最短的li的索引，这样整个页面结构就生成了：
效果图
因为数据源的原因，有些图片展示不出来。现在页面结构生成了，现在还有一个需求，就是在页面翻滚到底部时，继续加载下一页。
2.翻滚加载更多数据
当页面翻滚到底部时需要加载更多数据只需要在调用一遍ajax函数即可，但是由于ajax函数内部的数据处理函数还包含着更多内容，因此在外部用一个函数进行封装，方便调用：
现在加载的知识第一页数据，要想页面翻滚到底部时加载新的页面，不能把页数写死，因此，创建一个新变量，来改变加载的页数：
用鼠标滚轮事件来调用函数，原理就是当最短li的底部出现在可视区内以后，说明滚动到底了，这里需要用到getTop()函数；然后调用getList()函数，改变页数；另外，为了防止一次就把后续的页面全部加载出来，导致加载缓慢，设置一次只加载一页，在ajax函数的末尾，也需要设置一下b的值：
最后程序编写完了，还有一些页面布局的优化就没有做了，因为以前很少有记录过，内容写的的有点混乱。最后附上完整的js代码：
```
window.onload = function(){
var oUl = document.getElementById('ul');
var aLi = oUl.getElementsByTagName('li');
var iLen = aLi.length;
var b = true;
var iPage = 1;
getList();
//当鼠标往下翻滚到底时继续加载
window.onscroll = function(){
var _index = getShort();
var oLi = aLi[_index];
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(getTop(oLi) + oLi.offsetHeight < document.documentElement.clientHeight + scrollTop){
//当最短的li底部出现在可视区时加载下一页
if(b){//一次只能加载一页
b=false;
iPage++;
getList()
}
}
}
function getList(){
//初始化数据处理
ajax('get','getPics.php','cpage='+iPage,function(data){//数据处理并生成文档结构函数
//把获取到的字符串解析成对象；
var data = JSON.parse(data);
//根据数据生成文档结构
for(var i=0;i
//获取高度最短的li的索引
var _index = getShort();
var oDiv = document.createElement('div');//创建div节点
var oImg = document.createElement('img');//创建img节点
oImg.src = data[i].preview;//把请求的数据中的preview值赋给img的src属性
oImg.style.width = '240px';//设置img的宽度
oImg.style.height = data[i].height*(240/data[i].width) + 'px';//设置img的高度
oDiv.appendChild(oImg);//把img节点添加至div节点内
var oP = document.createElement('p');//创建p节点
oP.innerHTML = data[i].title;//把解析的对象数据中的title值作为节点的内容
oDiv.appendChild(oP);//把p节点添加至div节点内
aLi[_index].appendChild(oDiv);//把div节点添加至高度最短的li节点内
/*
图片加载延迟会造成高度误差，所以需要提前获得高度，防止偏差
* */
}
b = true;
})
}
//获取高度最短li的索引的函数
function getShort(){
var index = 0;
var ih = aLi[index].offsetHeight;//获得第0个li的高度
for(var i=0;i
if(aLi[i].offsetHeight < ih){
index = i;
ih = aLi[i].offsetHeight;
}
}
return index;//返回高度最短li的索引；
}
function getTop(obj){
var iTop = 0;
while(obj){
iTop += obj.offsetTop;
obj = obj.offsetParent;
}
return iTop;
}
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.send('content-type','application/x-www-form-urlencoded');
}
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){//得到想要的数据
success && success(xhr.responseText);//数据处理函数
}else{
console.log("出错了，Err:"+ xhr.status)
}
}
}
}
}
```
网友评论