码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-08-16 15:20:54      阅读:183      评论:0      收藏:0      [点我收藏+]

标签: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抓取网站接口图片瀑布流笔记

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

原文地址:http://kangjunfei.blog.51cto.com/11556647/1956629

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!