HTML瀑布流操作

企业开发 2019-02-19 07:00:52 阅读次数: 0 
<!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>

猜你喜欢

转载自blog.csdn.net/weixin_34198881/article/details/87431155
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022