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. 【版本管理】自定义git

    Git除了可配置user.name和user.email外,实际上,Git还有很多可配置项. 如 $ git config --global color.ui true,让Git显⽰示颜⾊色,会让命令 ...

  2. oracle11g的安装

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

  3. webapi Route 特性

    转载:http://www.th7.cn/Program/net/201410/302571.shtml ASP.NET Web API路由,简单来说,就是把客户端请求映射到对应的Action上的过程 ...

  4. ubuntu中报错：无法分配内存 (errno=12)

    今天碰到一个大坑,差点要了老命! 之前装了ubuntu双系统,后来崩溃,想在就想装VMware虚拟机,再装ubuntu,一切进展顺利,直到在虚拟机的ubuntu中安装IDEA时出现了问题. 安装过程并 ...

  5. MT【84】夹逼定值

    分析:此类题还是比较常见的,左右都有不等式,中间夹着一个式子,我们可以找个$x$使得中间式子满足的条件显示出来. 类似的方法可以用在这道浙江高考文科压轴题上

  6. 本地如何连接虚拟机上的MySql

    今天在本地链接虚拟机上的MySql,然而链接失败了!甚是尴尬! 首先想一想是什么原因导致链接失败: 基础环境:在Linux上安装mysql 1.检查虚拟机IP在本地是否可以ping 通过 虚拟机IP: ...

  7. maven项目添加mysql的链接驱动

    Maven项目中添加JDBC驱动   在pom.xml配置文件中添加: <dependency> <groupId>mysql</groupId> <arti ...

  8. CentOS 7.4 java验证码乱码的问题

     转载阿里云 摘要: 新服务器配置发布网站 配置后程序顺利启动在登录时发现验证码无法识别显示出了图片,但是字是乱码 初步估计应该是字体问题 ssh登录服务器查看默认字体 #fc-match msam1 ...

  9. vue-cli内部webpack的打包优化

    在此之前,我们先谈谈前端项目的性能优化. 优化前端项目无非就是2方面的优化: 一.网络性能优化(重点) 减少请求数量(webpack的天职就是打包) 减少请求资源大小(压缩gzip,后端会完成) CD ...

  10. C语言复习---获取矩阵的对角和

    #include <stdio.h> #include <stdlib.h> #include <math.h> #define MAX 5 int main() ...