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

发布时间：2020-07-31 18:24:12 作者：kangjunfei
来源：网络阅读：800

用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;

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

相关阅读