瀑布流布局JavaScript实现

html代码

<div id="content">
    <!-- <div>
        <img src="img/1.jpg">
        <p>人在社会上呆的久了,很容易会发生变化,比如我以前一直在想着如何发家致富，现在我只想着脱贫</p>
    </div> -->
</div>

css代码

   * {
            margin: 0;
            padding: 0
        }

        #content {
            width: 960px;
            margin: 0 auto;
            position: relative;
        }

        #content > div {
            width: 220px;
            padding: 4px;
            border: 1px solid #000;
        }

        #content > div > img {
            width: 100%;
        }

JS代码

  /*
        找出这些列中最短的那一列然后在插入下一张图片
     */

    //1、加载所有的图片
    var str = "";
    var oContent = document.getElementById("content");
    for (var i = 1; i <= 70; i++) {
        str += `<div class="box">
			<img src="img/${i}.jpg">
			<p>人在社会上呆的久了,很容易会发生变化,比如我以前一直在想着如何发家致富，现在我只想着脱贫</p>
		</div>`
    }
    oContent.innerHTML = str;

    //2。当页面上所有的图片 html css js都加载完毕以后
    var aBox = document.querySelectorAll(".box");
    window.onload = function () {
        //定义一个数组
        var iHeight = [0, 0, 0, 0];
        //找出4列
        for (var i = 0; i < 4; i++) {
            //每一个div都设置成定位
            aBox[i].style.position = "absolute";
            //每一个div的left值等于i*1张图片的宽度 +10
            aBox[i].style.left = i * aBox[0].offsetWidth + 10 * i + "px";
            //因为4列的起始高度是一样的 所有都设置成0
            aBox[i].style.top = 0;
            //当4列都定位安定好以后将这个4列的高度存入数组 方便下次从数组中找出最小的那个数字的下标
            iHeight[i] = aBox[i].offsetHeight;
        }

        //循环剩余的div
        for (var i = 4; i < aBox.length; i++) {
            //找出最小值得下标
            var index = getIndex(iHeight);
            //设定所有的div都是定位
            aBox[i].style.position = "absolute";
            //下次插入的div的位置在最小的那一列的位置
            aBox[i].style.left = index * aBox[0].offsetWidth + 10 * index + 'px';
            //下次插入的div的top值是iHeight的高度+10
            aBox[i].style.top = iHeight[index] + 10 + 'px';
            //更新iHeight里面的高度  当前元素的高度+原有数组中最小值的高度
            iHeight[index] = aBox[i].offsetHeight + iHeight[index] + 10;
        }

        //封装函数 找出数组里面最小值得下标
        function getIndex(arr) {
            var min = arr[0];
            var index = 0;
            for (var i = 0; i < arr.length; i++) {
                if (arr[i] < min) {
                    min = arr[i];
                    index = i;
                }
            }
            return index;
        }
    }