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. mybatis之注解方式实现

    * 使用mybatis举例,使用注解方式实现* 不需要针对UserMapperI接口去编写具体的实现类代码,这个具体的实现类由MyBatis帮我们动态构建出来,我们只需要直接拿来使用即可.* 1.导入 ...

  2. BZOJ2440 中山市选2011完全平方数（容斥原理+莫比乌斯函数）

    如果能够知道不大于n的合法数有多少个,显然就可以二分答案了. 考虑怎么求这个.容易想到容斥,即枚举完全平方数.我们知道莫比乌斯函数就是此种容斥系数.筛出来就可以了. 注意二分时会爆int. #incl ...

  3. CF10D LCIS

    题意翻译 求两个串的最长公共上升子序列. 题目描述 This problem differs from one which was on the online contest. The sequenc ...

  4. Rain on your Parade HDU - 2389 （hc板题）

    在客人能够拿到的伞与客人之间建边  跑hc就好了.... 看看别人的:https://blog.csdn.net/wall_f/article/details/8248350 #include < ...

  5. 洛谷P3385 【模板】负环（DFS求环）

    洛谷题目传送门 HNOI爆零前回刷模板题 非常不正经的题目,目前并没有合适的优秀算法,就算是大家公认的dfs(还是不要强行叫dfs-spfa吧,概念应该不一样,这就是暴力dfs松弛答案) 但是对于随机 ...

  6. 【BZOJ1294】[SCOI2009]围豆豆（动态规划，状压）

    [BZOJ1294][SCOI2009]围豆豆(动态规划,状压) 题面 BZOJ 洛谷 题解 首先考虑如何判断一个点是否在一个多边形内(不一定是凸的),我们从这个点开始,朝着一个方向画一条射线,看看它 ...

  7. NOIP2018备考——DP专题练习

    P4095 [HEOI2013]Eden 的新背包问题   P2657 [SCOI2009]windy数   P3413 SAC#1 - 萌数   P3205 [HNOI2010]合唱队   P476 ...

  8. VirtualBox 文件共享及网络配置技巧

    文件共享   1. 安装增强功能 2. 分配数据空间 这样就可以在virtualbox里访问本地的数据了:   网络配置

  9. 【bzoj2875】 Noi2012—随机数生成器

    http://www.lydsy.com/JudgeOnline/problem.php?id=2875 (题目链接) 题意 求${X_{n}}$. Solution 矩乘板子,这里主要讲下会爆lon ...

  10. 【hdu3842】 Machine Works

    http://acm.hdu.edu.cn/showproblem.php?pid=3842 (题目链接) 题意 一个公司使用一个厂房$D$天,希望获利最大.有$n$台机器,每一台可以在第$D_i$天 ...