<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="ajax.js"></script> <style> *{ margin:0; padding:0; } ul{ width:200px; background:greenyellow; float:left; margin-right:30px; } #all{ width:1200px; margin:0 auto; } img{ width:200px; } #sec>section{ float:left; height:50px; width:50px; line-height:50px; font-size:30px; } #sec{ height:50px; width:600px; margin-left:500px; } </style> </head> <body> <div id="all"> <ul></ul> <ul></ul> <ul></ul> <ul></ul> <ul></ul> <!--<section>--> <!--<div></div>--> <!--</section>--> </div> <section id="sec"></section> <script> var oPage=1; var change=15; var oAll=document.getElementById("all"); var aUl=document.getElementsByTagName("ul"); var oSec=document.getElementById("sec"); ajax("get","getPics.php","cpage"+oPage,function(rua){ var json=JSON.parse(rua); var nowpage=Math.ceil(json.length / change); for(var k=0;k<nowpage;k++){ var oSection=document.createElement("section"); oSection.innerHTML=`<div>${k+1}</div>`; oSec.appendChild(oSection); } var aSec=oSec.getElementsByTagName("section"); for(var k=0;k<aSec.length;k++){ aSec[k].index=k; aSec[k].onclick=function(){ for(var l=0;l<aUl.length;l++){ aUl[l].innerHTML=""; console.log(aUl[l]); } var newpa=this.index+1; var n=change*(newpa-1); for( ;n<json.length;n++){ if(n<change*newpa){ var heiarr=[]; for(var y=0;y<aUl.length;y++){ heiarr.push(aUl[y].offsetHeight); } heiarr.sort(function(num1,num2){ return num1-num2; }); var newimg=document.createElement("img"); newimg.src=json[n].image; newimg.style.height=300+'px'; newimg.style.width=200+'px'; for(var j=0;j<aUl.length;j++){ if(aUl[j].offsetHeight==heiarr[0]){ aUl[j].appendChild(newimg); } onOff=true; } } else{ return; } } } } }); </script> </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;