美文网首页
HTML瀑布流操作

HTML瀑布流操作

作者: 阿猫阿狗py | 来源:发表于2018-09-13 22:52 被阅读29次
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流操作</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        #container{
            width:1200px;
            margin:auto;
            /*background-color: black;*/
            position:relative;
        }

        #container img{
            width:188px;
        }

        .outer{
            margin:5px;
            padding:5px;
            border:solid 1px #888;
            border-radius: 5px;
            width:188px;
            position:absolute;
            top:0;
            transition:5s;
        }

        .box{
            border:solid 1px #efefef;
            overflow:hidden;
            border-radius:5px;
        }
    </style>
</head>
<body>

<div id="container">
    <div class="outer">
        <div class="box"><img src="images/img (1).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (2).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (3).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (4).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (5).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (6).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (7).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (8).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (9).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (10).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (11).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (12).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (13).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (14).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (15).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (16).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (17).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (18).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (19).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (20).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (21).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (22).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (23).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (24).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (25).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (26).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (27).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (28).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (29).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (30).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (31).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (32).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (33).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (34).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (35).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (36).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (37).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (38).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (39).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (40).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (41).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (42).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (43).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (44).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (45).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (46).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (47).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (48).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (49).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (50).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (51).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (52).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (53).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (54).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (55).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (56).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (57).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (58).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (59).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (60).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (61).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (62).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (63).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (64).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (65).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (66).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (67).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (68).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (69).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (70).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (71).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (72).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (73).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (74).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (75).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (76).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (77).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (78).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (79).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (80).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (81).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (82).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (83).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (84).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (85).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (86).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (87).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (88).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (89).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (90).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (91).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (92).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (93).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (94).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (95).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (96).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (97).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (98).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (99).jpg" alt=""></div>
    </div>
    <div class="outer">
        <div class="box"><img src="images/img (100).jpg" alt=""></div>
    </div>
</div>
<!--===========================================================-->

<script>
// <!--//网页内容加载事件：网页中的所有内容全部加载完成会执行-->
//window.onload方式将是一个良好的选择。window.onload是一个事件，当文档内容完全加载完成会触发该事件。

//onresize 事件会在窗口或框架被调整大小时发生。
    window.onresize = function(){
        //获取网页中所有的图片容器
        var _outers = document.getElementsByClassName("outer");
        //获取网页展示内容区域的宽度
        // var _client_width = document.getElementById("container").offsetWidth;
// ===========================================
//         获取宽度，自动更改列
        var _cw = document.body.offsetWidth;
        var _container = document.getElementById('container');
        _container.style.width = _cw * 0.8 + "px";

        var _client_width = _container.offsetWidth;
        console.log(_client_width);
// ================================================


        //获取网页中图片容器的宽度
        var _img_width = _outers[0].offsetWidth;
        //计算一行能放几张图片
        var _row_num = _client_width / _img_width;
        //声明一个数组，记录每一列的高度
        var _height = [];
        //循环放置图片
        for(var i=0;i<_outers.length;i++){
            if(i<_row_num){
                //放置第一行图片
                _outers[i].style.left = i * _img_width + "px";
                _outers[i].style.top = 0 ;
                //记录每一列的高度
                _height.push(_outers[i].offsetHeight);
            }else{
                //获取最小高度
                var _min_height = Math.min.apply(this,_height);
                //获取索引位置
                var _min_index = _height.indexOf(_min_height);
                //定位图片位置
                _outers[i].style.left = _min_index * _img_width + "px";
                _outers[i].style.top = _min_height + "px";

                //更新数组数据
                _height[_min_index] += _outers[i].offsetHeight;
            }
        }
    }
</script>
</body>
</html>

    相关文章

      网友评论

          本文标题：HTML瀑布流操作

          本文链接：https://www.haomeiwen.com/subject/uqxngftx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|HTML瀑布流操作|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！