<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{
margin:0px;
padding:0px;
}
ul{
width:1080px;
margin: 100px auto 0;
}
li{
width:248px;
float:left;
border:1px solid pink;
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>
window.onload = function ()
{
var oul = document.getElementById('ul1');
var ali = oul.getElementsByTagName('li');
var b = true;
var ipage = 1;
getlist();
function getlist()
{
ajax('get','ajax pbl.php','cpage='+ipage,function (data)
{
var data = JSON.parse(data);
if(!(data.length))
{
return;
}
for(var i = 0; i < data.length; i++)
{
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);
}
b = true;
});
}
window.onscroll = function ()
{
var _index = getshort();
var oli = ali[_index];
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
if(gettop(oli)+oli.offsetHeight < document.documentElement.clientHeight + scrollTop)
{
if(b)
{
b = false;
ipage++;
getlist();
}
}
}
function getshort()
{
var index = 0;
var ih = ali[index].offsetHeight;
for(var i = 1; i < ali.length; i++)
{
if(ali[i].offsetHeight < ih )
{
index = i;
ih = ali[index].offsetHeight;
}
}
return index;
}
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.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);
}
}
}
}
}
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
<?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;
?>
