泉州浮桥网页设计培训自适应瀑布流图片代码学

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0; padding:0;}
        #container{margin:auto; position:relative;}
        .box{position:absolute;padding:5px;float:left;}
        .item{padding:5px;border:solid 1px #ccc; border-radius:5px;}
        .item>img{width:200px;height:auto;display:block;border-radius:5px;}
    </style>
</head>
<body>
    
 
<!-- 存放所有图片的容器 -->
    <div id="container">
        <div class="box">
            <div class="item">
                <img src="images/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/9.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/10.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/11.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/12.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/13.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/14.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/9.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/10.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/11.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/12.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/13.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/14.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/9.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/10.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/11.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/12.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/13.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/14.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/9.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/10.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/11.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/12.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/13.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="item">
                <img src="images/14.jpg" alt="">
            </div>
        </div>
    </div>
    <script>
        window.onload = function() {
            waterFlow();
        }
 
        window.onresize = function() {
            waterFlow();
        }
 
        function waterFlow(){
            var _container = document.getElementById("container");
            // 获取所有的box
            var _boxes = document.getElementsByClassName("box");
            // 计算浏览器视窗中,能放几列,同时设置容器container的宽度
            var _clientWidth = document.documentElement.clientWidth;
            var _boxWidth = _boxes[0].offsetWidth;
            var _col = Math.floor(_clientWidth / _boxWidth);
            _container.style.width = _col * _boxWidth + "px";
 
            // 开始布局操作
            var _arrayRow = [];
            for(var i = 0; i < _boxes.length; i++) {
                if(i < _col) {// 第一行图片
                    _boxes[i].style.top = 0;
                    _boxes[i].style.left = i * _boxWidth + "px";
                    _arrayRow[i] = _boxes[i].offsetHeight;//保存高度
                    console.log(_arrayRow);
                } else {// 其他图片
                    // 获取最小高度、最小高度对应的下标
                    var _minHeight = Math.min.apply(null, _arrayRow);
                    var _minIndex = _arrayRow.indexOf(_minHeight);
                    console.log(_minHeight, _minIndex);
 
                    // 设置图片的定位
                    _boxes[i].style.left = _minIndex * _boxWidth + "px";
                    _boxes[i].style.top = _minHeight + "px";
 
                    // 更新数组的高度
                    _arrayRow[_minIndex] += _boxes[i].offsetHeight;
                }
            }
        }
    </script>
</body>
</html>

最新资讯

技术文章

广告设计合作