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. Palindrome Numbers UVA - 12050（第几个回文数）

    长度为k的回文串个数有9*10^(k-1) #include <iostream> #include <cstdio> #include <sstream> #in ...

  2. 使用VBA批量转换Excel格式，由.xls转换成.xlsx

    问题分析: Excel2007以前的格式是.xls,之后的格式是.xlsx.打开单独的一个Excel文档,使用“另存为”功能,可以很轻松的转换格式.但是面对几百个Excel表这样就太累了,搜索很久,也 ...

  3. wamp安装失败原因大全

    wamp 是 Windos.Apache.Mysql.PHP集成安装环境 为了安装hdwiki 所以需要这个环境 1.下载wampserver_x86_3.0.6 64位  环境包,安装路径禁止有空格 ...

  4. 【BZOJ1966】[AHOI2005]病毒检测（动态规划）

    [BZOJ1966][AHOI2005]病毒检测(动态规划) 题面 BZOJ 洛谷 题解 我就蒯了一份代码随便改了改怎么就过了??? 从这道题目蒯的 代码: #include<iostream& ...

  5. AtCoder Grand Contest 006

    AtCoder Grand Contest 006 吐槽 这套题要改个名字,叫神仙结论题大赛 A - Prefix and Suffix 翻译 给定两个串,求满足前缀是\(S\),后缀是\(T\),并 ...

  6. 解题：AT2064 Many Easy Problems&EXNR #1 T3 两开花

    题面 两道题比较像,放在一起写了,后者可以看成前者的加强版 (sto ztb orz) 先看AT那道题 考虑计算每个点的贡献,用容斥计算:每个点没有贡献当且仅当选的所有点都在以他为根时的一个子节点的子 ...

  7. POJ 2135 Farm Tour （网络流，最小费用最大流）

    POJ 2135 Farm Tour (网络流,最小费用最大流) Description When FJ's friends visit him on the farm, he likes to sh ...

  8. 关于http请求时 安全协议问题 PKIX path building failed 解决办法

    该问题的解决办法   1.在请求前需要将证书导入,不推荐       2.绕开安全协议处理 下面的代码时一段http请求并且绕开安全协议.可直接使用 /** * * @param url 需要请求的网 ...

  9. 使用Sql语句快速将数据表转换成实体类

    开发过程中经常需要根据数据表编写对应的实体类,下面是使用sql语句快速将数据表转换成对应实体类的代码,使用时只需要将第一行'TableName'引号里面的字母换成具体的表名称就行了: declare ...

  10. ELK logstash 处理MySQL慢查询日志

    在生产环境下,logstash 经常会遇到处理多种格式的日志,不同的日志格式,解析方法不同.下面来说说logstash处理多行日志的例子,对MySQL慢查询日志进行分析,这个经常遇到过,网络上疑问也很 ...