瀑布流

最新推荐文章于 2020-05-15 09:52:24 发布

fanrax

最新推荐文章于 2020-05-15 09:52:24 发布

阅读量158

点赞数

分类专栏： jsdemo 文章标签：瀑布流

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

版权

jsdemo 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul{
            width:200px;
            background:greenyellow;
            float:left;
            margin-right:30px;
        }
        #all{
            width:1200px;
            margin:0 auto;
        }
        img{
            width:200px;
        }
    </style>
    <script src="ajax.js"></script>
</head>
<body>
<div id="all">
    <ul></ul>
    <ul></ul>
    <ul></ul>
    <ul></ul>
    <ul></ul>
</div>
<script>
    //页面初始值
    var iPage=1;
var oAll=document.getElementById("all");
var aUl=oAll.getElementsByTagName("ul");
    console.log(typeof oAll);
    //开关
    var onOff=true;
//    init();
//    function init(){
//        ajax("get","getPics.php","cpage"+iPage,function(rua){
//            var json=JSON.parse(rua);
//            for(var i=0;i<json.length;i++){
                for(var j=0;j<aUl.length;j++){}
//                var index_rua=short();
//                var newimg=document.createElement("img");
//                newimg.src=json[i].image;
//                newimg.style.height=json[i].height*(225/json[i].width)+'px';
//                aUl[index_rua].appendChild(newimg);
//            }
//        });
//    }
    //初始化
    init();
    function init(){
        ajax("get","getPics.php","cpage"+iPage,function(rua){
            var json=JSON.parse(rua);
            for(var i=0;i<json.length;i++){
                //创建一个数组
                var heiarr=[];
                //循环ul的长度吧所有的ul真实高度加入数组
                for(var y=0;y<aUl.length;y++){
                    heiarr.push(aUl[y].offsetHeight);
                }
                //数组排序(从小到大)
                heiarr.sort(function(num1,num2){
                    return num1-num2;
                });
                //创建img标签
                var newimg=document.createElement("img");
                //新创建的newimg的属性赋值
                newimg.src=json[i].image;
                newimg.style.height=json[i].height*(225/json[i].width)+'px';
                //循环所有ul
                for(var j=0;j<aUl.length;j++){
                    //测试所有的ul是否和数组中的第一个值相等
                    if(aUl[j].offsetHeight==heiarr[0]){
                        //如果相等则把创建的newimg放到当前ul中
                        aUl[j].appendChild(newimg);
                    }
                    //让开关为true
                    onOff=true;
                }

            }
        });
    }


    window.onscroll=function()
    {
        //建变量rua等于ul的最小长度
        var rua=short();
        //oUl就是当前最短的ul
        var oUl=aUl[rua];
        //兼容滚动
        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
        //最短的ul实际高度+最后一张图片距可视区最顶部的距离  是否小于  可视区的高加上滚动的距离
        if(oUl.offsetHeight+toprua(oUl)<document.documentElement.clientHeight+scrollTop)
        {
            //如果小于则让开关编程false
            if(onOff)
            {
                onOff=false;
                //让请求的页数自加
                iPage++;
                //执行初始化函数
                init();
            }
        }
    }


    //求最短ul
    function short(){
        //创建索引
        var index=0;
        //创建变量等于第一个ul的真是高度
        var hei=aUl[index].offsetHeight;
        //循环ul
        for(var i=1;i<aUl.length;i++){
            //判断其他ul和第一个ul的数值大小
            if(aUl[i].offsetHeight<hei){
                //如果其他ul小于第一个，就让index等于当前ul的i
                index=i;
                //并且让hei等于当前ul的真是高度
                hei=aUl[i].offsetHeight;
            }
        }
        //放回索引值
        return index;
    }

    //闯入一个参 确定
    function toprua(obj)
    {
        //建一个变量itop
        var iTop=0;
        //当传入值存在的时候执行下面代码
        while(obj)
        {
            //让变量等于该对象距离最上面的距离
            iTop+=obj.offsetTop;
            //传入参数的数据等于他的定位父级(父级无定位)  body
            console.log(obj);
            //第一次进来是ul ，然后让obj等于他的定位父级  第二次进来是body  定位父级为null  下次就进不来循环
            obj=obj.offsetParent;
            console.log(obj);
        }
        //最后返回改变量
        return iTop;
    }
</script>
</body>
</html>


//ajax

function ajax(way,url,date,fn){
    var xhr=null;
    if(window.XMLHttpRequest){
        xhr=new XMLHttpRequest();
    }else{
        xhr=new ActiveXObject("Microsoft.XMLHTTP");
    }
    if(way=="get"){
        xhr.open(way,url+"?"+date,true);
        xhr.send();
        xhr.onreadystatechange= rua;
        function rua(){
            if(xhr.readyState==4){
                if(xhr.status==200){
                   fn(xhr.responseText);
                }
            }
        }
    }
    else{
        xhr.open(way,url,true);
        xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
        xhr.send(date);
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status==200){
                    fn(xhr.responseText);
                }
            }
        }
    }
}

//请求的php文件

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