ajax瀑布流

HTML

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

CSS

body{
	margin: 0;
}
#ul1{
	width: 1080px;
	margin: 100px auto 0;
}
li{
	width: 247px;
	list-style: none;
	float: left;
	margin-right: 10px;
}
li div{
	border: 1px  solid #000;
	padding: 10px;
	margin-bottom: 10px;
}	
li div img{
	width: 225px;
	display: block;
}

JS

<script src="ajax.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var oUl=document.getElementById('ul1');
var aLi=oUl.getElementsByTagName('li');
var iLen=aLi.length;
var iPage=1;
var onOff=true;

//初始化
//加载第一页的数据图片
getList();
function getList(){
	ajax('get','getList.php','cpage=' + iPage,function(data){
		var data = JSON.parse(data);
		//	console.log(data);
	
		//当没有数据的时候停止
		if(!data.length){
			return;
		}
	
		//根据数据生成图片列表
		for (var i=0;i<data.length;i++) {
			//获得最短的li的下标，并向其中添加元素
			var num=getShort();
			
			//生成元素
			var oDiv=document.createElement('div');
			var oImg=document.createElement('img');
			//从json格式的data数据中的preview属性中获得图片的地址
			oImg.src=data[i].preview;
			//设置图片的宽高
			oImg.style.width='225px';
			//数据中有图片的宽高信息
			oImg.style.height=data[i].height*(225/data[i].width)+'px';
			//将图片添加到div中
			oDiv.appendChild(oImg);
			var oP = document.createElement('p');
			oP.innerHTML = data[i].title;
			oDiv.appendChild( oP );
			
			aLi[num].appendChild(oDiv);
		}
		//当前页面的数据加载完成之后，开关打开，执行滚动条滚动函数
		onOff = true;
	});
}
//获得高度最小的li的下标
function getShort(){
	var index=0;
	/*
	 先获得第一个li的高度，然后跟后面的每一li的高度进行对比，遇到比他小的,
	 把这个小值赋值给ih，并且修改index的值，然后继续对比，直到找到最小的
	 * */
	var ih=aLi[index].offsetHeight;
	for (var i=0;i<aLi.length;i++) {
		if(aLi[i].offsetHeight<ih){
			index=i;
			ih=aLi[i].offsetHeight;
		}
	}
	
	//返回li的下标
	return index;
}

/*
 当页面滚动到最短的li显示在可视页面中时，加载第二页的数据
 * */
//页面滚动
window.onscroll=function(){
	//获得最短li的下标
	var num=getShort();
	var oLi=aLi[num];
	
	//获取滚动条的滚动距离
	var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
	
	/*
	 当元素的定位高+自身高度小于可视窗口的高度+滚动距离时，最短的li列表达到底部
	 开关关闭防止不断加载
	数据页面增加
	执行加载函数
	 * */
	
	if ( getTop( oLi ) + oLi.offsetHeight < document.documentElement.clientHeight + scrollTop ) {
		if ( onOff ) {
			onOff = false;
			iPage++;
			getList();
		}
	}
}


function getTop(obj) {
	var iTop = 0;
	while(obj) {
		iTop += obj.offsetTop;
		obj = obj.offsetParent;
	}
	return iTop;
}
</script>

PHP

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

/*
API:
	getPics.php

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

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

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

echo $content;

?>

ajax封装的js文件

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);
			} else {
				alert('出错了,Err：' + xhr.status);
			}
		}
		
	}
}