offset

关键点：
js获取元素整体（包括border）的

  • 高度：element.offsetHeight
  • 宽：element.offsetWidth
  • 距离左边:element.offsetLeft
  • 距离顶部：element.offsetTop

js 的这些方法获取的都是一个数字，是不带单位的，所以给样式的时候一定要记得加px!!!

  1. //如下所示
  2. let item = document.getElementById("app");
  3. let width = item.offsetWidth;    //此处width仅仅是个数字，不能直接赋值给height
  4. item.style.height = width+"px";

getElementsByClassName拿到的是对象！！！

  1. let itemArr = document.getElementsByClassName('item');
  2. console.log(typeof itemArr);    
  3. //Object

所以不要用forEach循环遍历。此处只能用普通的for循环，for in都不要用！！！

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

    <style>
        *{
            margin: 0%;
            padding: 0%;
        }
        .item{
            width: 270px;
            padding: 15px;
            border: 1px solid #333;
            float: left;
        }
        .item img{
            width: 270px;
        }
    </style>
</head>
<body>
    <div class="item">
        <img src="images/01.jpg" alt="">
    </div>
    <div class="item">
        <img src="images/02.jpg" alt="">
    </div>
    <div class="item">
        <img src="images/03.jpg" alt="">
    </div>
    <div class="item">
        <img src="images/04.jpg" alt="">
    </div>
    <div class="item">
        <img src="images/05.jpg" alt="">
    </div>
    <div class="item">
        <img src="images/06.jpg" alt="">
    </div>
    <div class="item">
        <img src="images/07.jpg" alt="">
    </div>
    <div class="item">
        <img src="images/08.jpg" alt="">
    </div>
    <div class="item">
        <img src="images/09.jpg" alt="">
    </div>
    <div class="item">
        <img src="images/10.jpg" alt="">
    </div>
    <div class="item">
        <img src="images/11.jpg" alt="">
    </div>
    <div class="item">
        <img src="images/12.jpg" alt="">
    </div>


    <script>
        window.onload = function(){
            let itemArr = document.getElementsByClassName('item');

            let heightArr = [];//用来装高度
            for(let i =0;i<itemArr.length;i++){
                let width = itemArr[i].offsetWidth;
                /* 默认一行装四张图 */
                if(i<4){
                    heightArr.push(itemArr[i].offsetHeight);
                }else{
                    let minHeight = Math.min(...heightArr);
                    let index = heightArr.indexOf(minHeight);
                    let Left = index*width;//定位用的left
                    let Top = minHeight;//定位用的Top
                    console.log(Left+'-----'+Top)
                    itemArr[i].style.position = 'absolute';
                    itemArr[i].style.left = Left+"px";
                    itemArr[i].style.top = Top+"px";
                    /* 更新最矮高度 */
                    heightArr[index] = minHeight+itemArr[i].offsetHeight;
                }
            }
        }
    </script>
</body>
</html>