js实现流式布局

1. CSS样式

 			/*使用通配符将内外边距都设置为零, 这样看着好看*/
            * {
                margin: 0px;
                padding: 0px;
            }
            /*将主容器的布局方式设置为相对布局，一下方式可设置container为水平居中，详见：[https://blog.csdn.net/weixin_49074984/article/details/109128659] */
            #container {
                position: relative;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
            }
            /*定制box尺寸*/
            .box {
                padding: 7px;
                float: left;
                box-sizing: border-box;
                width: 212px;  /* 图片尺寸+wrapper内边距+box内边距 */
            }
            /*将承载图片的容器定制颜色及边框大小和圆角*/
            .wrapper {
                padding: 5px;
                box-shadow: 0 0 5px #ccc;
                border-radius: 5px;
            }
            .pic {
                font-size: 0; /*消除行内元素的间隙*/
            }
            .pic img {
                width: 100%;
                height: auto;
            }
            .wrapper > p {
                color: #999;
                background: #FAFAFA;
                font-size: 14px;
                padding-top: 5px;
            }

2. html结构

			<div id="container">
                <div class="box">
                    <div class="wrapper">
                        <div class="pic">
                            <img src="imgs/1.jpg">
                        </div>
                        <p>此处为文字说明</p>
                    </div>
                </div>
                <div class="box">
                    <div class="wrapper">
                        <div class="pic">
                            <img src="imgs/2.jpg">
                        </div>
                        <p>此处为文字说明</p>
                    </div>
                </div>
                <div class="box">
                    <div class="wrapper">
                        <div class="pic">
                            <img src="imgs/3.jpg">
                        </div>
                        <p>此处为文字说明</p>
                    </div>
                </div>
                <div class="box">
                    <div class="wrapper">
                        <div class="pic">
                            <img src="imgs/4.jpg">
                        </div>
                        <p>此处为文字说明</p>
                    </div>
                </div>
                <div class="box">
                    <div class="wrapper">
                        <div class="pic">
                            <img src="imgs/5.jpg">
                        </div>
                        <p>此处为文字说明</p>
                    </div>
                </div>
                <div class="box">
                    <div class="wrapper">
                        <div class="pic">
                            <img src="imgs/6.jpg">
                        </div>
                        <p>此处为文字说明</p>
                    </div>
                </div>
                <div class="box">
                    <div class="wrapper">
                        <div class="pic">
                            <img src="imgs/7.jpg">
                        </div>
                        <p>此处为文字说明</p>
                    </div>
                </div>
                <div class="box">
                    <div class="wrapper">
                        <div class="pic">
                            <img src="imgs/8.jpg">
                        </div>
                        <p>此处为文字说明</p>
                    </div>
                </div>
                <div class="box">
                    <div class="wrapper">
                        <div class="pic">
                            <img src="imgs/9.jpg">
                        </div>
                        <p>此处为文字说明</p>
                    </div>
                </div>
                <div class="box">
                    <div class="wrapper">
                        <div class="pic">
                            <img src="imgs/10.jpg">
                        </div>
                        <p>此处为文字说明</p>
                    </div>
                </div>
                <div class="box">
                    <div class="wrapper">
                        <div class="pic">
                            <img src="imgs/11.jpg">
                        </div>
                        <p>此处为文字说明</p>
                    </div>
                </div>
                <div class="box">
                    <div class="wrapper">
                        <div class="pic">
                            <img src="imgs/12.jpg">
                        </div>
                        <p>此处为文字说明</p>
                    </div>
                </div>
            </div>

3. js代码

  window.onload = function() { // 一定要页面加载完成再调用
                waterFall.init('container', 'box');
            }
            
            window.onresize = function() {
                waterFall.init('container', 'box');
            }

            var waterFall = {
                init: function(container, box) {
                    var windowWidth = window.innerWidth;
                    var oContainer = document.getElementById(container);
                    oContainer.style.width = windowWidth > 1200 ? 1200 + 'px' : windowWidth + 'px';
                    var oBoxs = oContainer.getElementsByClassName(box);
                    var boxWidth = oBoxs[0].offsetWidth;
                    var containerWidth = oContainer.offsetWidth;
                    var col = containerWidth / boxWidth; // box列数
                    var arrHeight = []; // 用来记录每列已添加box的高度
                    for (var i = 0; i < oBoxs.length; i++) {
                        oBoxs[i].style.position = "absolute"; // 给每个box定义布局方式为绝对布局
                        var boxHeight = oBoxs[i].offsetHeight;
                        if (i < col - 1) { // 第一行
                            arrHeight.push(oBoxs[i].offsetHeight);
                            oBoxs[i].style.top = 0;
                            oBoxs[i].style.left = i * boxWidth + 'px';
                        } else {
                            var minBoxHeight = Math.min.apply(null, arrHeight); // 求出arrHeight中最小高度的那一列
                            var index = this.getIndex(minBoxHeight, arrHeight); // 获取以上最小高度那列的索引
                            oBoxs[i].style.top = minBoxHeight + 'px';
                            oBoxs[i].style.left = boxWidth * index + 'px';
                            arrHeight[index] += oBoxs[i].offsetHeight; // 由于已添加box，所以此处更新arrHeight中已添加box那一列的高度值
                        }
                    }
                },
                getIndex: function(val, arr) { // 得到索引
                    for (var i = 0 ; i < arr.length; i++) {
                        if (val == arr[i]) {
                            return i
                        }
                    }
                }
            }