温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

ajax抓取网站接口图片瀑布流笔记

发布时间:2020-07-31 18:24:12 来源:网络 阅读:813 作者:kangjunfei 栏目:系统运维

用php结合ajax来实现去其它网站抓取图片,在自己本地用!

ajax代码部分

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>图片瀑布流</title> </head> <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 img{         width:225px;         display:block;     } </style> <script type="text/javascript" src="./jquery-1.8.3.min.js"></script><script type="text/javascript">     window.onload =function(){         var oUl =document.getElementById('ul1');         var aLi =document.getElementsByTagName('li');         //alert (aLi);         var iLen =aLi.length;         //初始化数据        var cpage=1;        $.get('./demo1.php',{cpage:cpage},function (data){           //alert (data);            var data = JSON.parse(data);           // alert (data);            for (var i =0; i<data.length; i++){                //获取高度最短的li                var _index = getShort();                //alert (_index);                //创建div                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 * (255 /data[i].width)+ 'px';                oDiv.appendChild(oImg);                var oP = document.createElement('p');                oP.innerHTML =data[i].title;                oDiv.appendChild(oP);               //把img和p 还有div 放到li                aLi[_index].appendChild(oDiv);            }        });         //找最短的li 封装函数         function getShort(){             var index = 0;             var ih =aLi[index].offsetHeight;             //alert (ih);             //从第一个开始比较             for(var i=1;i<iLen;i++){                if(aLi[i].offsetHeight < ih){                   index = i;                   ih = aLi[i].offsetHeight;                }             }             return index;         }     } </script> <body>   <ul id="ul1">       <li></li>       <li></li>       <li></li>       <li></li>   </ul> </body> </html>

php部分

<?php /**  * Created by PhpStorm.  * User: a-4  * Date: 2017/8/14  * Time: 17:07  */ //抓取数据 $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;


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI