ajax-瀑布流

最新推荐文章于 2021-09-06 18:40:35 发布

石界星空

最新推荐文章于 2021-09-06 18:40:35 发布

阅读量378

点赞数

分类专栏： ajax 文章标签： ajax

本文链接：https://blog.csdn.net/stone10086/article/details/72625816

版权

ajax 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、瀑布流的ajax应用

1、制作原理
列等宽型瀑布流：花瓣网
画图说明
2、准备的文件
数据文件接口
ajax函数（已经封装好）
3、函数的编写

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            ul{
                width: 1000px;
                margin: 50px auto;
            }
            ul li{
                width: 227px;
                float: left;
                list-style: none;
                margin-right: 10px;
            }
            ul li div{
                width: 227px;
                border: 1px solid #ddd;
                box-sizing: border-box;
                margin-top: 10px;
            }

            ul li div img{
                display: block;
                width: 225px;

            }
            ul li div p{
                width: 225px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                font-size: 14px;
                overflow: hidden;
                text-overflow: ellipsis;
            }

        </style>
    </head>
    <body>
        <ul>
            <li>


            </li>
            <li>

            </li>
            <li>

            </li>
            <li>

            </li>
        </ul>
    </body>
    <script src="ajax_util.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        var aLi=document.querySelectorAll('li');
        var page=1;
        var b=true;

        getlist(page);

        window.onscroll=function(){
            var index3=getShort();
            var srollTop=document.documentElement.scrollTop||document.body.scrollTop;
            var clientHeight=document.documentElement.clientHeight||document.body.clientHeight;
            var oLishort=aLi[index3].offsetHeight;
            if (srollTop+clientHeight>aLi[0].offsetTop+oLishort) {
                if(b==true){
                    b=false;
                    console.log(b);
                    page++;
                    console.log(page);
                    getlist(page);
                }   
            }
        }

        function getlist(page){
            ajax('GET','getPics.php','cpage='+page,function(data){
                var arr=JSON.parse(data);
                console.log(arr[0].image)
                for (var key in arr) {
                    var index2=getShort();
                    var oDiv=document.createElement('div');
                    var oImg=document.createElement('img');
                    var oP=document.createElement('p');
                    oImg.style.width='225px';
                    oImg.style.height=(225/arr[key].width)*arr[key].height+'px';
                    oImg.src=arr[key].image;
                    oP.innerHTML=arr[key].title;
                    oDiv.appendChild(oImg);
                    oDiv.appendChild(oP);
                    aLi[index2].appendChild(oDiv);
                };
                b=true;
            }); 

        }

        function getShort(){
            var index1=0;
            var iH=aLi[index1].offsetHeight;
            for (var i=1;i<aLi.length;i++) {
                if (aLi[i].offsetHeight<iH) {
                    iH=aLi[i].offsetHeight;
                    index1=i;
                };
            }
            return index1;
        }
    </script>
</html>