CSS3实现图片木桶布局

效果图：

代码如下，复制即可使用：

<!DOCTYPE html>

    <script>

        window.navigator.appVersion.indexOf('Trident') != -1 && alert('请用谷歌或火狐新版打开！');

    </script>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <style type="text/css">

        *{

            margin: 0;

        }

        body{

            padding: 50px 0;

            overflow-x: hidden;

        }

        .wrap{

            display: flex;

            flex-wrap: wrap;

        }

        .wrap img{

            margin: 3px;

            padding: 5px;

            height: 200px;

            background: #ccc;

            flex-grow: 1;

            object-fit: cover;

            transition: .3s;

        }

        .wrap:after{

            display: block;

            content: '';

            flex-grow: 9999;

        }

        .wrap img:hover{

            transform: scale(1.2);

            box-shadow: 0 0 20px #fff;

            z-index: 9999;

        }

    </style>

</head>

<body>

    <div class="wrap"></div>

    <script>

        var wrap = document.querySelector('.wrap');

        var src = ['//cdn.attach.qdfuns.com/notes/pics/201710/13/093715yf2jt47tttj9lyfj.jpg','//cdn.attach.qdfuns.com/notes/pics/201710/13/092835ebbkfzjtb4okwj2b.jpg','//cdn.attach.qdfuns.com/notes/pics/201710/13/092835beqzk6kyjkbwr5bw.jpg','//cdn.attach.qdfuns.com/notes/pics/201710/13/092835nshkii0i2k0dsikn.jpg','//cdn.attach.qdfuns.com/notes/pics/201710/13/093653k6ztcd7x7czebkfh.jpg']

        for(var i=0; i<Math.floor(Math.random()*10+30); i++){

            var img = document.createElement('img');

            img.src = src[Math.floor(Math.random()*5)];

            wrap.appendChild(img);

        }

    </script>

</body>

</html>

如有错误，欢迎联系我改正，非常感谢！！！

CSS3实现图片木桶布局的更多相关文章

  1. 【js 实践】js 实现木桶布局

    还有两个月左右就要准备实习了,所以特意练一练,今天终于搞定了js 的木桶布局了 这一个是按照一个插件的规格去写的以防以后工作需要,详细的解释在前端网这里 http://www.qdfuns.com/n ...

  2. 纯css3实现图片三角形排列

    当今是个读图时代.纯大部分网页或多或少都会用到图片.特别是图片较多的网页.图片的布局和排版就非常重要了.今天要给大写带来一款纯css3实现图片三角形排列.适合一系列的图片.效果图如下: 在线预览    ...

  3. CSS百分比padding实现比例固定图片自适应布局

    一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比 ...

  4. UIButton的文本与图片的布局

    UIButton内部文本和图片的布局是我们日常代码中,不可缺少的部分,按钮默认左边图片右边文本,那要实现左边文本,右边图片,我们该怎么解决呢,上面图片,下面文本又该怎么办呢 其实很简单,今天总结下,目 ...

  5. CSS3支持box-flex弹性布局

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  6. 5分钟 搞定UIButton的文本与图片的布局

    UIButton内部文本和图片的布局是我们日常代码中,不可缺少的部分,按钮默认左边图片右边文本,那要实现左边文本,右边图片,我们该怎么解决呢,上面图片,下面文本又该怎么办呢 其实很简单,今天总结下,目 ...

  7. jQuery/CSS3实现图片层叠展开特效

    这是一款基于jQuery和CSS3的图片层叠展开特效,让鼠标滑过图片时即可触发这些特效.其中有一款就像扇子展开收拢一样,看起来效果都非常不错.当然本文主要还是来分析一下用jQuery实现这一效果的方法 ...

  8. CSS3弹性盒模型布局模块介绍

    来源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-in ...

  9. 第八十节，CSS3边框图片效果

    CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一．属性解释     CSS3 ...

随机推荐

  1. dotTrace 每行执行时间和执行次数

    如果代码中出现效率问题,使用dotTrace来跟踪分析代码的效率问题还是很方便的.使用dotTrace不但可以看到每一个方法被调用的次数和总时间,而且可以引入源代码,查看源代码中每一行执行的次数和时间 ...

  2. poj2082 Terrible Sets（单调栈）

    Description Let N be the set of all natural numbers {0 , 1 , 2 , . . . }, and R be the set of all re ...

  3. oracle11g的安装

    1. 解压缩已经下载好的文件,两个文件一起解压,如图所示 2. 到解压路径当中找到setup.exe文件 3.安装的第一步,配置安全更新,如果不希望接收安全更新邮件可以选择将下方的复选框勾选去除 4. ...

  4. 【刷题】BZOJ 4254 Aerial Tramway

    Description You own a park located on a mountain, which can be described as a sequence of n points ( ...

  5. 前端学习 -- Css -- 高度坍塌问题的产生以及解决

    在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高. 但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷. 由于 ...

  6. eos交易同步过程和区块生产过程源码分析

    交易同步过程 1 通过命令cleos调用 cleos transfer ${from_account} ${to_account} ${quantity} 发起交易2 eos调用chain_plugi ...

  7. python的内置模块re模块方法详解以及使用

    正则表达式 一.普通字符 .     通配符一个.只匹配一个字符 匹配任意除换行符"\n"外的字符(在DOTALL模式中也能匹配换行符 >>> import re ...

  8. Python序列化与反序列化-json与pickle

    Python序列化与反序列化-json与pickle 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.json的序列化方式与反序列化方式 1>.json序列化 #!/usr ...

  9. css拾遗（一）（inline-block,absolute）

    一:inline-block中不要嵌套其他block标签,不然会破坏布局 <style> .left{ float:left; } .hide{ display:none; } a{ di ...

  10. 优雅地搭建整合ssm项目

    spring + spring mvc + mybatis 三大框架建议观看 黑马程序员出品的 Springmvc+Mybatis由浅入深全套视频教程 Spring框架2016版视频 观看顺序 ,我个 ...