ajax抓取網站接口圖片瀑布流筆記
阿新 • • 發佈:2017-08-16
ajax抓取網站接口圖片瀑布流筆記
用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;
本文出自 “kangjunfei” 博客,轉載請與作者聯系!
ajax抓取網站接口圖片瀑布流筆記