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.οnscrοll=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);
}
}
}
}