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方法