瀑布流

瀑布流思想
瀑布流就是我们放好第一行，从第二行放，就找列的高度最小，就把第二行的第一张放在高度最小的那一列下面，以此类推，接下来放图就根据这个标准，这样是为了我们放的张数越多，保证每一列的高度都相近。哈哈，这是我自己总结的，方法不止这一种。下面是代码：

/*HTML代码*/
<div id="container">
        <div class="box">
            <div class="item">
                <img src="img/1.jpg"/>
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="img/2.jpg"/>
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="img/3.jpg"/>
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="img/4.jpg"/>
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="img/5.jpg"/>
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="img/6.jpg"/>
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="img/7.jpg"/>
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="img/8.jpg"/>
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="img/9.jpg"/>
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="img/10.jpg"/>
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="img/11.jpg"/>
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="img/12.jpg"/>
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="img/13.jpg"/>
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="img/14.jpg"/>
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="img/15.jpg"/>
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="img/16.jpg"/>
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="img/17.jpg"/>
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="img/18.jpg"/>
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="img/19.jpg"/>
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="img/20.jpg"/>
            </div>
        </div>

    </div>

/*css代码*/
<style>
    div{position:relative;}
    .box{height:auto;padding:2px;float:left;}

    .item{border:#ddd solid 1px;
        border-radius:8px;box-shadow:2px 2px 2px 0 #ccc;padding:5px;
        overflow:hidden;}

    div>img{width:200px;height:auto;border-radius:5px;}
 </style>

/*js代码*/
<script>

        window.onload = function(){
            //一行可以放几张图片
            var clientWidth = document.documentElement.clientWidth;
            console.log(clientWidth);

            //第一个盒子的宽度

            var firstBox = document.querySelector('.box');
            console.log(firstBox);
            var boxWidth = firstBox.offsetWidth;

            //列数
            var col = parseInt(clientWidth/boxWidth);
            console.log(col);


            //数组记录第一行所有列的高度

            var colHeightArray = [];
            var boxs = document.querySelectorAll('.box');
            for (let i = 0; i < col; i++) {
                let box = boxs[i];
                colHeightArray.push(box.offsetHeight);
            }
            console.log(colHeightArray);

            //第一列之外的所有图片

            for (let j = col; j < boxs.length; j++) {
                let box = boxs[j];
                console.log(box);

                //放在哪一列，求数组中的最小值，和最小值所在下标
                var min = Math.min(...colHeightArray);
                var minIndex = colHeightArray.indexOf(min);
                console.log(min,minIndex);

                var x = minIndex * boxWidth;
                var y = min;
                box.style.position = 'absolute';
                box.style.left = x + 'px';
                box.style.top = y + 'px';

                //更新数组中对应的高度
                colHeightArray[minIndex] = colHeightArray[minIndex] + box.offsetHeight;
            }

        }       

</script>

效果图