前端页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background: #EDEDED;
}
#ul1{
width: 1000px;
margin: 0 auto;
list-style: none;
overflow: hidden;
background: #fff;
}
#ul1 li{
width: 240px;
float: left;
margin: 0 5px;
padding: 20px 0;
}
#ul1 li div{
width: 220px;
padding: 9px;
border: 1px solid #999;
margin-bottom: 10px;
}
#ul1 li div img{
width: 220px;
display: block;
}
</style>
<script src="ajax.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload=function(){
var oUl=document.getElementById("ul1");
var aLi=oUl.getElementsByTagName('li');
var iLen=aLi.length;
var ipage=1;
var flag=true;//定义一个开关,用于控制页面数据的加载
getList(); //初始加载第一页(cpage=1)的数据
function getList(){
ajax('get','getPics.php','cpage='+ipage,function(data){
var data=JSON.parse(data);//字符串转对象
if (!data.length) {
//数据加载完成
return;
}
var leng=data.length;
for (var i=0; i<leng; i++) {//循环每个数据,每次都往最短的li里添加数据
var _index=getShort();//最短li的索引
var oDiv=document.createElement('div');
var oImg=document.createElement('img');
oImg.src=data[i].preview;//预览图
oImg.style.height=220*data[i].height/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里面添加数据
}
//循环结束之后(本页所有数据加载完成之后)才能打开开关,才可加载下一页
flag=true;
})
}
//滚动鼠标触发
window.onscroll=function(){
var _index=getShort();
var oLi=aLi[_index];
var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
//当 最短li的高度加上到页面的距离 小于 滚动条高度加上屏幕的高度 时加载第二页(cpage=1)的数据
if (getTop(oLi)+oLi.offsetHeight < document.documentElement.clientHeight+scrollTop) {
if (flag) {
flag=false;//关上开关,防止在当前页面加载完成前继续加载其他页面
ipage++;//加载下一页数据
getList();
}
}
}
//获取最短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;
}
//获取元素到页面最顶端的距离
function getTop(obj){
var iTop=0;
while(obj){
iTop+=obj.offsetTop;
obj=obj.offsetParent;
}
return iTop;
}
}
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
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;
?>
返回数据:
[
{"id":"630642",
"referer":"https:\/\/www.behance.net\/gallery\/10983193\/Clara-Daniel",
"url":"http:\/\/www.wookmark.com\/image\/630642\/clara-daniel-on",
"width":"600",
"height":"513",
"image":"http:\/\/www.wookmark.com\/images\/original\/630642_wookmark.jpg",
"preview":"http:\/\/www.wookmark.com\/images\/thumbs\/630642_wookmark.jpg"},
…
]
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);
}
}
}
}