js 编写页面瀑布流布局

最新推荐文章于 2022-08-16 08:33:50 发布

pengzihui

最新推荐文章于 2022-08-16 08:33:50 发布

阅读量146

点赞数

文章标签： html5 html javascript es6

本文链接：https://blog.csdn.net/pengzihui/article/details/104687128

版权

页面宽度，图片大小高度不同。如何在网页上呈现出更为美观的布局。
有些网站的主体内容需要用户自己上传图片内容。用户上传什么样的图片，
内容无法确定。页面为了美观需要按照一定的审美来排列。
如何实现瀑布流布局如下：

<style>
        .cont{margin: 0 auto;position: relative;}
        .box{float: left;padding: 4px;}
        .imgbox{border: solid 1px black;padding: 4px;border-radius: 4px;}
        .imgbox img{width: 200px;display: block;}
    </style>
    <script>
        // 最后加载。
        onload=function(){
            var wf =new WaterF()
            wf.init();
        }

        class WaterF{
             constructor(){
                引入元素
               this.clientW=document.documentElement.clientWidth;
               this.abox=document.querySelectorAll(".box");
               this.cont=document.querySelector(".cont");
             }
             init(){
                // 初始化样式。计算出瀑布流。最大DIV的宽度。和每一行要放的个数。
              this.maxNum=parseInt(this.clientW/this.abox[0].offsetWidth);
              this.cont.style.width=this.maxNum*this.abox[0].offsetWidth+"px";
              执行第一行
              this.firstLine();
              this.otherLine();
             }
            //  瀑布流第一行。需要拿到第一行每一个元素的高度。
            //  以方便下一行获取到第一行的每一个元素的高度。
             firstLine(){
            //  将第一行每一个元素的高度放在一个数组中。
                 this.heightArr=[];
                 for(var i=0;i<this.maxNum;i++){
                     this.heightArr.push(this.abox[i].offsetHeight);
                 }
             }
            //  除了第一行以外的，以下行数。
             otherLine(){
                // 遍历除第一行，以外的每一行的每一个元素。
                  for(var i=this.maxNum;i<this.abox.length;i++){
                    // 上一行元素高度的最小值。
                      var min=getMin(this.heightArr);
                    //   上一行最高度最小的。索引。
                      var minIndex=this.heightArr.indexOf(min);
                    //   将每一个当前行元素加上定位。
                      this.abox[i].style.position = "absolute";
                    //   优先定位到上一行高度最小的。图片下
                      this.abox[i].style.top = min + "px";
                    //   按照索引。找到上一行高度值最小的图片位置。
                      this.abox[i].style.left = minIndex * this.abox[0].offsetWidth + "px";
                    //   配合循环。每次向高度最小。只放入一个元素时，
                    //  都需要加上被放入的那个元素高度值。
                    //   将这两个元素的高度也同时纳入。高度计算中，
                      this.heightArr[minIndex] = this.heightArr[minIndex] + this.abox[i].offsetHeight;
                }
            }
        }
        // 封装函数拿到最小值。
        function getMin(arr){
            var myarr = [];
            for(var j=0;j<arr.length;j++){
                myarr.push(arr[j]);
            }
            return myarr.sort((a,b)=>a-b)[0];
        }
    </script>
</head>
<body>
    <div class="cont">
        <div class="box">
            <div class="imgbox">
                <img src="引入的图片" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="引入的图片" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="引入的图片" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="引入的图片" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="引入的图片" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="引入的图片" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="引入的图片" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="引入的图片" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="引入的图片" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="引入的图片" alt="">
            </div>
        </div>