用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;
时间： 2024-10-20 19:00:06