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. 【华为机试】—— 15.求int型正整数在内存中存储时1的个数

    题目 解法 import java.util.Scanner; public class Main { public static void main(String[] args) { Scanner ...

  2. 一本通1644【例 4】佳佳的 Fibonacci

    1644:[例 4]佳佳的 Fibonacci 时间限制: 1000 ms         内存限制: 524288 KB sol:搞了大概一个多小时什么结果都没,被迫去看题解,感觉自己菜到家了qaq ...

  3. FMDB基本操作

    1.以前使用数据库,因为一般就建立一张表,所以都是自己写代码创建,没用过fmdb,这次因为项目中涉及聊天模块,需要多张表格和数据库保存聊天记录 按照以前方法不好操作,就研究了下fmdb,发现确实挺方便 ...

  4. Cucumber java + Webdriver(一)

    一.打开Eclipse,新建一个maven项目,打开pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xm ...

  5. Go匿名函数

    1.GO语言的匿名函数就是闭包 基本概念 闭包是可以包含自由(未绑定到特定对象)变量的代码块,这些变量不在这个代码块内或者任何全局上下文中定义,而是在定义代码块的环境中定义.要执行的代码块(由于自由变 ...

  6. 百度搜索 “Java面试题” 前200页（面试必看）

    前言 本文中的题目来源于网上的一篇文章<百度搜索 "Java面试题" 前200页>,但该文章里面只有题目,没有答案.因此,我整理了一些答案发布于本文.本文整理答案的原则 ...

  7. （转）c# 筛选数组重复项

    转自:http://www.cnblogs.com/zhaoweiting/archive/2009/08/24/1552724.html 第一种方法:public static String[] R ...

  8. 【刷题】BZOJ 1093 [ZJOI2007]最大半连通子图

    Description 一个有向图G=(V,E)称为半连通的(Semi-Connected),如果满足:?u,v∈V,满足u→v或v→u,即对于图中任意 两点u,v,存在一条u到v的有向路径或者从v到 ...

  9. StratifiedKFold与GridSearchCV版本前后使用方法

    首先在sklearn官网上你可以看到: 所以,旧版本import时: from sklearn.cross_validation import GridSearchCV 新版本import时: fro ...

  10. Dubbo学习笔记11：使用Dubbo中需要注意的一些事情

    指定方法异步调用 前面我们讲解了通过设置ReferenceConfig的setAsync()方法来让整个接口里的所有方法变为异步调用,那么如何指定某些方法为异步调用呢?下面讲解下如何正确地设置默写方法 ...