<!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{ 1080px; margin: 100px auto 0; } li{ 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 { 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; ?>