AJAX实现简易的瀑布流布局

最新推荐文章于 2021-12-05 23:13:21 发布

i鲸落

最新推荐文章于 2021-12-05 23:13:21 发布

阅读量349

点赞数

本文链接：https://blog.csdn.net/XinYe666666/article/details/80998381

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 1200px;
            margin: 0 auto;
        }
        ul li{
            float: left;
            width: 250px;
            list-style: none;
            margin: 20px;
        }
        ul li img{
            border: 1px solid #a81e32;
            width: 250px;
            margin-bottom: 10px;
        }
    </style>
    <script src="ajax.js"></script>
    <script>
        window.onload = function() {
            //获取界面节点
            var li = document.getElementsByTagName('li');
            var x = 1;
            var on = false;
            //调用接口获取数据
            fn();//首次加载
            // 加载页面的函数
            function fn(){
                ajax('get', 'getPics.php', 'cpage'+x, function(re) {
                    //将数据库中获取的数据转换成数组形式，这里要根据数据库中的数据形式来写，这里我获取到的是json形式
                    var arr = JSON.parse(re);
                    for(var i = 0; i < arr.length; i++) {
                        var index = Short(li);//查找最短的li
                        var img = document.createElement('img');
                        img.src = arr[i].preview;//img获取图片地址
                        img.alt = "loadding"
                        //根据宽高比计算img的高，为了防止未加载时高度太低影响最短Li的判断
                        img.style.height = arr[i].height * (250 / arr[i].width) + "px";
                        //加入到最短的li中
                        li[index].appendChild(img);
                    }
                    on = true;//加载完成设置开关，用于后面判断是否加载下一页
                });
            }

            window.onscroll = function (){
                var index = Short(li);
                var minLi = li[index];
                var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

                if(minLi.offsetHeight+minLi.offsetTop<scrollTop+document.documentElement.clientHeight){
                    //开关为开，即上一页加载完成，才能开始加载
                    if(on){
                        on = false;
                        x++;
                        fn();
                    }
                }
            }

        }

        //  获取数组中高度最小的索引
        // @param {Object} li 数组

        function Short(li) {
            var index = 0;
            var liHeight = li[index].offsetHeight;
            for(var i = 0; i < li.length; i++) {
                if(li[i].offsetHeight < liHeight) {
                    index = i;
                    liHeight = li[i].offsetHeight;
                }
            }
            return index;
        }

    </script>
</head>
<body>
<ul id="uli">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

</body>
</html>

i鲸落

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX实现简易的瀑布流布局

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style type="text/css"&gt;
复制链接

扫一扫