<!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: 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;} </style> <script src="ajax.js"></script> <script> window.onload = function(){ 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','getPics.php','cpage='+ipage,function(data){ var data = JSON.parse(data); if(!data){ 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); } onOff = true; }); } /*拉动滚动条触发*/ window.onscroll = function(){ var _index = getShort(); var oLi = aLi[_index]; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if(getTop(oLi)+oLi.offsetHeight < document.documentElement.clientHeight +scrollTop ){ if(onOff){ onOff = false; ipage++; getList(); } } }; /*获取元素top*/ function getTop(obj){ var iTop = 0; while(obj){ iTop += obj.offsetTop; obj = obj.offsetParent; } return iTop; } /*获取页面li的最短高度*/ function getShort(){ var index = 0; var ih = aLi[index].offsetHeight; for(var i=1;i<iLen;i++){ if(ih > aLi[i].offsetHeight){ index = i; ih = aLi[index].offsetHeight; } } return index; } }; </script> </head> <body> <ul id='ul1'> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
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); } } } }
<?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; ?>