JavaScript动态加载瀑布流

最新推荐文章于 2024-02-23 09:32:17 发布

...lemon_...

最新推荐文章于 2024-02-23 09:32:17 发布

阅读量527

点赞数 1

分类专栏： frontEnd 文章标签： javascript 图片

本文链接：https://blog.csdn.net/qianqianningmeng/article/details/78181016

版权

frontEnd 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

利用JavaScript动态加载瀑布流 在未知图片有多少时 每一张图片都加载到已加载图片中的最小高度处，已达到每张图片正常咬合

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>动态加载瀑布流-无限加载瀑布流</title>
    <link rel="stylesheet" href="css/initialize.css"/>
    <style type="text/css">
        .container{
            margin: 20px auto;
            position: relative;
            background-color: red;
        }
        img{
            margin: 10px;
            padding: 10px;
            border: 1px solid purple;
            border-radius: 10px;
            box-shadow: 0 0 10px red;
        }
        .content{
            float: left;
        }
    </style>
</head>
<body>
    <div class="container"></div>
    <script>
        var jsonStr = '{"src":["i1.jpg","i2.jpg","i3.jpg","i4.jpg","i5.jpg","i6.jpg","i7.jpg","i8.jpg","i9.jpg","i10.jpg","i11.jpg","i12.jpg","i13.jpg","i14.jpg","i15.jpg"]}';
        var imgData=JSON.parse(jsonStr);
        var container=document.querySelector('.container');
//        加载图片
        function addImg(){
            for(var index=0;index<imgData.src.length;index++){
                var div=document.createElement('div');
                div.className='content';
                var img=document.createElement('img');
                img.src='img/'+imgData.src[index];
                div.appendChild(img);
                container.appendChild(div);
            }
        }
//        加载瀑布流
        function addWaterfall(){
            //            获得页面中所有div
            var divList=document.querySelectorAll('.content');
            var num=Math.floor(document.documentElement.clientWidth/divList[0].offsetWidth);
            var myWidth=num*divList[0].offsetWidth;
            container.style.width=myWidth+'px';
//            创建存放高度的数组
            var heightArr=[];
//            加载瀑布流
            for(var index=0;index<divList.length;index++){
//                动态加载瀑布流分两种情况 第一种：第一行加载完成；其余的；
                if(index<num){
                    heightArr.push(divList[index].offsetHeight);
                }else{
//                    加载剩下的内容,每个div时绝对定位
                    divList[index].style.position='absolute';
//                    获得最小高度。在最小高度下面加载下一张照片
                    var minTop=Math.min.apply(null,heightArr);
//                    left 定位
                    var minIndex=heightArr.indexOf(minTop);
                    var minLeft=divList[minIndex].offsetLeft;
//                    设置当前定位
                    divList[index].style.top=minTop+'px';
                    divList[index].style.left=minLeft+'px';
//                    将高度累加改变高度数组，以防全部添加到同一个地方
                    heightArr[minIndex]+=divList[index].offsetHeight;
                }
            }
        }
//        判断是否要加载下一批图片
        function ifAddData(){
//            浏览器最下面的距离是否已经大于最后一张照片的top坐标
            var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
            var screenHeight=document.documentElement.clientHeight;
//            滚动距离加上屏幕高度
            var maxTop=scrollTop+screenHeight;
//            最后一个top坐标
            var divList=document.querySelectorAll('.content');
            var lastHeight=divList[divList.length-1].offsetTop;
            if(maxTop>lastHeight){
                return true;
            }else{
                return false;
            }
        }

        addImg();
//        加载瀑布流  window.onload 在图片加载完成后 才能获得其距离 宽高等数据
        window.οnlοad= function () {
            addWaterfall();
        };
        //只要滚动事件发生，就需要判断是否需要添加新数据
        document.οnscrοll= function () {
            if(ifAddData()){
                addImg();
                addWaterfall();
            }
        };
    </script>
</body>
</html>