ajax和js实现瀑布流布局

最新推荐文章于 2021-09-14 19:47:45 发布

番茄酱炒梨子

最新推荐文章于 2021-09-14 19:47:45 发布

阅读量1.2k

点赞数 1

分类专栏： web前端 javascript ajax 文章标签： ajax 浏览器布局 web前端 javascript

本文链接：https://blog.csdn.net/sinat_25017107/article/details/78125204

版权

web前端同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

javascript

2 篇文章 0 订阅

订阅专栏

ajax

1 篇文章 0 订阅

订阅专栏

所谓的瀑布流布局就是浏览器上滑可以加载更多图片(其实是假数据)，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #container{
            margin: 0 auto;
            /*width: 1204px;*/
            position: relative;
        }
        .box{
            padding: 5px;
            float: left;
            background-color: pink;
        }
        .box .box_img{
            padding: 5px;
            border: 1px solid palevioletred;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }
        .box img{
            width: 150px;
        }
    </style>
</head>
<body>
<script>
    window.onload = function () {
        var boxArr = document.getElementsByClassName('box');
        var container = document.getElementById('container');
        var boxHeightArr = [];
//        console.log(box.offsetWidth);

        // 判断什么时候加载数据
        function checkFlag(boxHeightArr) {
            var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
//            console.log(scrollTop);
            var pageHeight = Math.max(document.documentElement.clientHeight, document.body.clientHeight);
//            console.log(pageHeight);
            if (scrollTop + pageHeight > Math.min.apply(null, boxHeightArr)) {

                return true;
            }
        }

        //求出最矮盒子对应的索引函数
        function getMinHeightIndex(arr, minHeight) {
            for (var index = 0; index < arr.length; index++) {
                if (arr[index] === minHeight) {
                    return index;
                }
            }
        }

        function imgLocation(container, content, boxHeightArr) {
            var clientWidth = document.documentElement.clientWidth;
            var boxWidth = content[0].offsetWidth;
            //floor 求一个小于但最接近它的整数
            var cols = Math.floor(clientWidth / boxWidth);
//            console.log(cols);
            container.style.width = boxWidth * cols + "px";

            for (var i = 0; i < content.length; i++) {
                var boxHeight = content[i].offsetHeight;
                if (i < cols) {
                    //在这里创建一个数组
                    //让这个数组存储第一排 ，每个盒子的高度
                    boxHeightArr[i] = boxHeight;
                } else {
                    //求出最矮的盒子高度
                    var minBoxHeight = Math.min.apply(this, boxHeightArr);
                    //求出最矮盒子对应的索引
                    var minBoxIndex = getMinHeightIndex(boxHeightArr, minBoxHeight);
                    //盒子瀑布流定位  顶部间距就是最矮盒子的高度
                    content[i].style.position = 'absolute';
                    content[i].style.top = minBoxHeight + 'px';
                    content[i].style.left = minBoxIndex * boxWidth + 'px';
                    //关键:更新数组最矮高度,使下一个图片在高度数组中总是找最矮高度的图片下面拼接
                    boxHeightArr[minBoxIndex] += boxHeight;
                }
            }
        }

        imgLocation(container, boxArr, boxHeightArr);

        // 数据通过ajax请求获得, 获得的数据如下


        window.onscroll = function () {
            if(checkFlag(boxHeightArr)){
                console.log("现在可以加载数据了");
                var imgData = {
                    "data" :[{"src" : "1.jpg"},{"src" : "2.jpg"},{"src" : "3.jpg"},{"src" : "8.jpg"},{"src" : "6.jpg"}]
                };
                var data = imgData.data;
                for(let item of data){
                    var newBox = document.createElement('div');
                    newBox.className = 'box';
                    container.appendChild(newBox);
                    var newBoxImage = document.createElement('div');
                    newBoxImage.className = 'box_img';
                    var img = document.createElement('img');
                    img.src = "../img/"+item.src;
                    newBoxImage.appendChild(img);
                    newBox.appendChild(newBoxImage);
                }
                imgLocation(container, boxArr, boxHeightArr);
            }
        }
    }
</script>
    <div id="container">
        <div class="box">
            <div class="box_img">
                <img src="../img/1.jpg" alt="">
            </div>
        </div>

        <div class="box">
            <div class="box_img">
                <img src="../img/2.jpg" alt="">
            </div>
        </div>

        <div class="box">
            <div class="box_img">
                <img src="../img/3.jpg" alt="">
            </div>
        </div>

        <div class="box">
            <div class="box_img">
                <img src="../img/4.jpg" alt="">
            </div>
        </div>

        <div class="box">
            <div class="box_img">
                <img src="../img/5.jpg" alt="">
            </div>
        </div>

        <div class="box">
            <div class="box_img">
                <img src="../img/6.jpg" alt="">
            </div>
        </div>

        <div class="box">
            <div class="box_img">
                <img src="../img/7.jpg" alt="">
            </div>
        </div>

        <div class="box">
            <div class="box_img">
                <img src="../img/8.jpg" alt="">
            </div>
        </div>

        <div class="box">
            <div class="box_img">
                <img src="../img/9.jpg" alt="">
            </div>
        </div>
    </div>
</body>
</html>