JavaScript动态加载瀑布流

最新推荐文章于 2023-09-14 11:59:29 发布

...lemon_...

最新推荐文章于 2023-09-14 11:59:29 发布

阅读量507

点赞数 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>

...lemon_...

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript动态加载瀑布流

利用JavaScript动态加载瀑布流在未知图片有多少时每一张图片都加载到已加载图片中的最小高度处，已达到每张图片正常咬合动态加载瀑布流-无限加载瀑布流 .container{ margin: 20px auto; position: relative;
复制链接

扫一扫

专栏目录