html木桶布局,CSS3如何实现图片木桶布局？（附代码）

本篇文章给大家通过代码示例介绍一下使用CSS3实现图片木桶布局的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

高度相同，而宽度不一样的布局，称之为木桶布局。它有几个鲜明的特点：每行的图片高度一致；每行的图片都是占满的。

思路：

1、容器flex布局

2、图片定高、超出换行

3、图片都设置 flex-grow: 1; 以充满整行

4、图片都设置 object-fit: cover; 以解决图片变形

5、容器 :after 伪类设置 flex-grow: 9999; 且值足够高以解决最后一行图片数量少时仍然充满整行过于扁长

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

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

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;

}

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

var src = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg']

for(var i=0; i

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

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

wrap.appendChild(img);

}

效果图：

更多炫酷CSS3、html5、javascript特效代码，尽在：js特效大全！

html木桶布局,CSS3如何实现图片木桶布局？（附代码）相关推荐

Java修改图片分辨率（附代码） | Java工具类
目录前言环境依赖代码总结前言本文提供可以修改图片分辨率的java工具类,实用主义的狂欢. 环境依赖添加必要的一些maven依赖. <dependency><groupI ...
C语言实现简单的图片加密（附代码）
简要说明:在日常生活中我们可能会有一些"学习资料"以备不时之需查看学习,可是有时我们使用设备时一不小心点到了又会给我们带来"学习"的压力或者焦虑,那么只有我们在 ...
css 里面写响应式布局,CSS3怎么做出响应式布局
今天给大家带来一个用CSS3做出来的响应式布局的案列,需要的朋友可以拿去借鉴使用,响应式是CSS3的一个特色,我们熟练掌握后手机端和PC端都可以熟练的使用. *{padding: 0;margin: ...
Winform中实现图片格式转换(附代码下载)
场景选择一张照片并选择保存位置和要转换的图片格式实现图片格式转换. 项目运行效果注: 博客主页: https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸 ...
基于tensorflow 批量修改自己的图片数据集（附代码）
转载自:地址现在网上有很多关于Deeplearning的教程,不过这些教程的数据集都是已经做好的,并且格式名字什么的都已经整理好了.特别是很多入门的教程都是Mnist 的数据集,这都已经非常的完善了 ...
Python 实现图片裁剪（附代码） | Python工具
目录前言环境依赖代码总结前言本文提供将图片按照自定义尺寸进行裁剪的工具方法,一如既往的实用主义. 环境依赖 ffmpeg环境安装,可以参考我的另一篇文章:windows ffmpeg安装部 ...
基于卷积神经网络CNN的图片分类实现——附代码
目录摘要: 1.卷积神经网络介绍: 2.卷积神经网络(CNN)构建与训练: 2.1 CNN的输入图像 2.2 构建CNN网络 2.3 训练CNN网络 3.卷积神经网络(CNN)的实际分类测试: 4. ...
制作自己的图片数据集（附代码）
自从入坑深度学习,一直都是用现有的数据集进行训练网络,今天想自己制作自己的数据集,因此将收集到的图片进行数据集制作. 我的图片是人眼睛的图片,平均每个人有40张图片,命名是一个人的图片名称的前几个是一 ...
Java 实现图片裁剪（附代码） | Java工具类
目录前言 Maven依赖代码总结前言本文提供将图片按照自定义尺寸进行裁剪的Java工具类,一如既往的实用主义. Maven依赖 <dependency><groupId&g ...

html木桶布局,CSS3如何实现图片木桶布局？（附代码）

html木桶布局,CSS3如何实现图片木桶布局？（附代码）相关推荐

最新文章

热门文章