分页加载图片

最新推荐文章于 2019-05-08 15:19:15 发布

fanrax

最新推荐文章于 2019-05-08 15:19:15 发布

阅读量280

点赞数

分类专栏： jsdemo 文章标签：分页加载图片

本文链接：https://blog.csdn.net/qq_41925937/article/details/80990408

版权

jsdemo 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="ajax.js"></script>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul{
            width:200px;
            background:greenyellow;
            float:left;
            margin-right:30px;
        }
        #all{
            width:1200px;
            margin:0 auto;
        }
        img{
            width:200px;
        }
        #sec>section{
            float:left;
            height:50px;
            width:50px;
            line-height:50px;
            font-size:30px;
        }
        #sec{
            height:50px;
            width:600px;
            margin-left:500px;
        }
    </style>
</head>
<body>
<div id="all">
    <ul></ul>
    <ul></ul>
    <ul></ul>
    <ul></ul>
    <ul></ul>

    <!--<section>-->
        <!--<div></div>-->
    <!--</section>-->
</div>
<section id="sec"></section>
<script>
    var oPage=1;
    var change=15;
    var oAll=document.getElementById("all");
    var aUl=document.getElementsByTagName("ul");
    var oSec=document.getElementById("sec");
    ajax("get","getPics.php","cpage"+oPage,function(rua){
        var json=JSON.parse(rua);
        var nowpage=Math.ceil(json.length / change);
        for(var k=0;k<nowpage;k++){
            var oSection=document.createElement("section");
            oSection.innerHTML=`<div>${k+1}</div>`;
            oSec.appendChild(oSection);
        }
        var aSec=oSec.getElementsByTagName("section");
        for(var k=0;k<aSec.length;k++){
            aSec[k].index=k;
            aSec[k].onclick=function(){
                for(var l=0;l<aUl.length;l++){
                    aUl[l].innerHTML="";
                    console.log(aUl[l]);
                }
               var newpa=this.index+1;
                var n=change*(newpa-1);
                for( ;n<json.length;n++){
                    if(n<change*newpa){
                        var heiarr=[];
                        for(var y=0;y<aUl.length;y++){
                            heiarr.push(aUl[y].offsetHeight);
                        }
                        heiarr.sort(function(num1,num2){
                            return num1-num2;
                        });
                        var newimg=document.createElement("img");
                        newimg.src=json[n].image;
                        newimg.style.height=300+'px';
                        newimg.style.width=200+'px';
                        for(var j=0;j<aUl.length;j++){
                            if(aUl[j].offsetHeight==heiarr[0]){
                                aUl[j].appendChild(newimg);
                            }
                            onOff=true;
                        }
                    }
                    else{
                        return;
                    }
                }
            }
        }

    });
</script>
</body>
</html>

<?php
header('Content-type:text/html;charset="utf-8"');

/*
   API:
   getPics.php
   参数：
   cpage：获取数据的页数
 */

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

fanrax

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分页加载图片

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="ajax.js"&gt;&lt;/script
复制链接

扫一扫