1、什么是ajax?

ajax （异步编程的一种解决方案） 是一种用于创建快速动态网页的技术。
通过后台与服务器之间数据的少量交换，在不刷新页面的情况下，更新页面部分的数据。

2、工作原理？

相当于在浏览器（客户端）与服务器之间增加了一个中间层（ajax引擎），
使用户操作与服务器响应异步化，这样就可以把以前服务器的一些负担转嫁到客户端，
利用客户端闲置的处理能力来处理，从而减轻服务器负担和带宽。

//复制并运行代码，即可显示效果

3、封装原生ajax

function ajax(method,url,sendData,fnSucc,fnFaild) {
	var oAjax = null;
	if (window.XMLHttpRequest) {
		oAjax = new XMLHttpRequest();
	} else {
		oAjax = new ActiveXObject('Microsoft.XMLHTTP');
	}
	if (method == 'get') {
		url += '?' + sendData + '&' + new Date().getTime();
	}
	oAjax.open(method,url,true);
	if (method == 'get') {
		oAjax.send()
	} else {
		oAjax.setRequestHeader("content-type","application/x-www-form-urlencoded");
		oAjax.send(sendData);
	}
	oAjax.onreadystatechange = function () {
		if (oAjax.readyState == 4) {
			if (oAjax.status == 200) {
				if (fnSucc) { fnSucc(oAjax.responseText) }
			} else {
				fnFaild && fnFaild(oAjax.status)
			}
		}
	}
}

4、创建一个php文件（getPics.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;
?>

5、创建一个index.html文件（效果为瀑布流）

---------------css样式

*{
	margin: 0;
	padding: 0;		
}
#list{
	list-style:none;
	width:1200px;
	margin:50px  auto;
}
#list li{
	float:left;
	margin-right:10px;
	width:230px;
	padding:10px;
}
img{
	display:block;
	width:230px;
}
div{
	width:230px;
	padding:10px;
	border:1px solid gray;
}

---------------------html布局

<ul id="list">
	<li>
		<div>
			<img src="http://www.wookmark.com/images/original/656338_wookmark.png" alt="">
		</div>
	</li>
	<li>
		<div>
			<img src="http://www.wookmark.com/images/original/656346_wookmark.jpg" alt="">
		</div>
	</li>
	<li>
		<div>
			<img src="http://www.wookmark.com/images/original/656338_wookmark.png" alt="">
		</div>
	</li>
	<li>
		<div>
			<img src="http://www.wookmark.com/images/original/656332_wookmark.jpg" alt="">
		</div>
	</li>
</ul>

------------------------js代码

var olist = document.getElementById("list");
	var ali = document.getElementsByTagName("li");
	var len = ali.length;
	var ipage = 1;
	var flag = true;
	getData();
	window.onscroll = function() {
		var ic = document.documentElement.clientHeight || document.body .clientHeight;
		var is = document.documentElement.scrollTop || document.body.scrollTop;
		var $index = getMin();
		var minH = ali[$index].offsetHeight;
		if(ic+is >= minH){
			ipage ++;
			getData();
		}
	}
	function getData(){
        ajax("get","getPics.php","cpage=" + ipage,function(data) {
            var oData = JSON.parse(data);
            var len1 = oData.length;
            for(var i=0;i<len1;i++){
                var _index = getMin();
                var oDiv = document.createElement("div");
                var oimg = document.createElement("img");
                oimg.src = oData[i].image;
                oimg.style.width = 230+"px";
                oimg.style.height = oData[i].height;
                var op = document.createElement("p");
                op.innerHTML = oData[i].title;
                oDiv.appendChild(oimg);
                oDiv.appendChild(op);
                ali[_index].appendChild(oDiv);
            }
        })
    }
	function getMin(){
		var index = 0;
		var minH = ali[0].offsetHeight;
		for(var i=1;i<len;i++){
			if(ali[i].offsetHeight < minH){
				index = i;
				minH = ali[i].offsetHeight;
			}
		}
		return index;
    }
    //将封装好的ajax引入在这里