js瀑布流布局

最新推荐文章于 2022-07-13 19:42:16 发布

海龟先生plus

最新推荐文章于 2022-07-13 19:42:16 发布

阅读量117

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_45219069/article/details/95370174

版权

js 专栏收录该内容

70 篇文章 1 订阅

订阅专栏

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .mian{
            min-height: 400px;
            position: relative; /*pic会定位*/
        }
        .mian .pic{
            float: left;
            padding: 5px;
         
        }
        .mian .pic img{
            width: 165px;
            padding: 5px;
            border-radius:10px;
        }
    </style>
</head>
<body>
    <div class="mian">
        <div class="pic"><img src="img2/1.jpg" alt=""></div>  
        <div class="pic"><img src="img2/2.jpg" alt=""></div> 
        <div class="pic"><img src="img2/3.jpg" alt=""></div>  
        <div class="pic"><img src="img2/4.jpg" alt=""></div>
        <div class="pic"><img src="img2/5.jpg" alt=""></div> 
        <div class="pic"><img src="img2/6.jpg" alt=""></div>  
        <div class="pic"><img src="img2/7.jpg" alt=""></div> 
        <div class="pic"><img src="img2/8.jpg" alt=""></div>  
        <div class="pic"><img src="img2/9.jpg" alt=""></div>
        <div class="pic"><img src="img2/10.jpg" alt=""></div>  
        
        <div class="pic"><img src="img2/11.jpg" alt=""></div>  
        <div class="pic"><img src="img2/12.jpg" alt=""></div> 
        <div class="pic"><img src="img2/13.jpg" alt=""></div>  
        <div class="pic"><img src="img2/14.jpg" alt=""></div>
        <div class="pic"><img src="img2/15.jpg" alt=""></div> 
        <div class="pic"><img src="img2/16.jpg" alt=""></div>  
        <div class="pic"><img src="img2/17.jpg" alt=""></div> 
        <div class="pic"><img src="img2/18.jpg" alt=""></div>  
        <div class="pic"><img src="img2/19.jpg" alt=""></div>
        <div class="pic"><img src="img2/20.jpg" alt=""></div>    

        <div class="pic"><img src="img2/21.jpg" alt=""></div>  
        <div class="pic"><img src="img2/22.jpg" alt=""></div> 
        <div class="pic"><img src="img2/23.jpg" alt=""></div>  
        <div class="pic"><img src="img2/24.jpg" alt=""></div>
        <div class="pic"><img src="img2/25.jpg" alt=""></div> 
        <div class="pic"><img src="img2/26.jpg" alt=""></div>  
        <div class="pic"><img src="img2/27.jpg" alt=""></div> 
        <div class="pic"><img src="img2/28.jpg" alt=""></div>  
        <div class="pic"><img src="img2/29.jpg" alt=""></div>
        <div class="pic"><img src="img2/30.jpg" alt=""></div>    
    </div>
    <script>
        //主要思想
        //瀑布流布局--将所有的图片放在一个大的div中，同时让每个图片用单独div包起来
        //先自然布局，让其浮动排列
        //获取元素后，计算下屏幕能放多少个图片（屏幕宽/图片宽），让其居中
        //获取所有图片div，遍历获取一排的个数（所以需要屏幕能放的图片数--列数）
        //求出一行中最小高度--让剩下的div定位到它下面
        //最后高度更新，arryHeight[mindex] += picHeight，重新+=到获取的高度数组中
        //又动态改变了最小高度的数组值

        window.onload=function(){   //页面加载的问题，这里是动态获取，让html全部加载完，在执行
        //获取元素
        var pics=document.querySelectorAll(".pic")
        var mian=document.querySelector(".mian")
        //获取屏幕宽度，看一排的、能放几个
        var screenWidth=document.body.offsetWidth//获取屏幕的宽
        var picWidth=pics[0].offsetWidth
        //个数
        var clos=Math.floor(screenWidth/picWidth)//看看一排最多放几个
        //将mian居中
        mian.style.width=clos* picWidth+"px"     //设置宽，然后居中
        mian.style.margin="0 auto"
        //数组--一排的
        var arryHeight=[]                       //建立一个空数组，待会把一排的数组装进去
        for(var i=0;i<pics.length;i++){
            var picHeight=pics[i].offsetHeight //装所有的
            if(i<clos){
                arryHeight.push(picHeight)      //通过判断小于列数，取出，并添加
            }else{
                console.log(i);//6-29
                
                //求一行中最小高度
                var minarryHeight=Math.min.apply(null,arryHeight)
                //求最小高度的下标
                var mindex=getIndex(arryHeight,minarryHeight)
                //给剩下的定位到最小高度下面那个
               pics[i].style.position="absolute"
               pics[i].style.left= mindex*picWidth+"px"
               pics[i].style.top= minarryHeight+"px"
                //动态更新高度
                arryHeight[mindex] += picHeight
            }  
        }
      
        
        //求下标
        function getIndex(arr,val){ //求最小高度的下标
            for(var j=0;j<arr.length;j++){
                if(arr[j]==val){
                    return j
                }
            }
        }
      
        
     } 
    </script>

在这里插入图片描述

海龟先生plus

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js瀑布流布局

<style> *{ margin: 0; padding: 0; } .mian{ min-height: 400px; position: relative; /*pic会定位*/ } .mian .pic{...
复制链接

扫一扫

专栏目录