1在后端转换，调用API.
ajax瀑布流：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #ul1{ width: 1000px; margin: 100px auto; /*border: 1px solid #d8d8d8;*/ } #ul1 li{ list-style: none; width: 227px; float: left; margin-right: 10px; } #ul1 li div{ margin-bottom: 10px; border: 1px solid #000; box-sizing: border-box; } #ul1 li img{ width: 225px; } </style> <script type="text/javascript"> // 封装ajax方法 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> <script type="text/javascript"> window.onload=function(){ //1.初始化数据 var oUl=document.getElementById('ul1'); var aLi=oUl.getElementsByTagName('li'); var page=1; var b=true; //var aLiLen=aLi.length; //2.通过数据文件接口getPics.php获取到数据，然后插入到li里面。 getlist(); function getlist(){ ajax('get','getPics.php','cpage='+page,function(data){ //var data=eval(data); var data = JSON.parse(data); for(var i=0;i<data.length;i++){ var index2=getShort(); //通过一个函数，得到最短的li索引 var oDiv=document.createElement('div');//创建div节点 var oImg=document.createElement('img');//创建img节点 oImg.src=data[i].preview; //为新img节点增加src。宽高 oImg.style.width='225px'; oImg.style.height=data[i].height*(225/data[i].width)+'px'; oDiv.appendChild(oImg); //将img节点插入到div节点里面 var oP=document.createElement('p'); //新建p节点 oP.innerHTML=data[i].title; oDiv.appendChild(oP); aLi[index2].appendChild(oDiv); //将新建的div节点插入到最短的li里面 } b=true; }); } //3.构造函数，对比得到最短的li，并且返回这个li的下标。 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[i].offsetHeight; } } return index; } window.onscroll=function(){ var index2=getShort(); var oLishort=aLi[index2]; var scrollTop=document.documentElement.scrollTop || document.body.scrollTop; if((oLishort.offsetTop+oLishort.offsetHeight)<document.documentElement.clientHeight+scrollTop){ //alert('该加载了'); if(b){ b=false; page++; getlist(); } } }; }; </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; ?>
2 使用script标签向另一个域上的资源进行请求，传递参数fn，保存将来要执行的js函数名。
搜索框：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ margin:30px; } *{ list-style:none; } #input{ color: lightcoral; } a:hover{ color: lightgreen; } a{ text-decoration: none; color: lightcoral; } </style> <script type="text/javascript"> window.onload=function(){ var input=document.getElementById("input"); input.onkeyup=function(){ var newScript=document.createElement("script"); newScript.src='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+input.value+'&cb=fn'; document.body.appendChild(newScript); } // } </script> <script type="text/javascript"> function fn(data){ console.log(data); // var newli=document.createElement("li"); var d=data.s[4]; var arr=data.s; var len=arr.length; console.log(len); var html=''; for(var i=0;i<len;i++){ // var newli=document.createElement("li"); html+='<li><a href="https://www.baidu.com/s?wd='+arr[i]+'" target="_blank">'+arr[i]+'</a></li>'; } var infoContainer=document.getElementById("infoContainer"); infoContainer.innerHTML=html; console.log(d); } </script> </head> <body> <div id="wrap"> <input type="text" name="" id="input" /> <ul id="infoContainer"> </ul> </div> </body> </html>
调用百度接口，效果：
3 h5 xhr2方法