哈尔滨哪里做网站好,网站建设与功能模块,世界著名室内设计案例,100个新公司起名本篇文章给大家通过代码示例介绍一下使用CSS3实现图片木桶布局的方法。有一定的参考价值#xff0c;有需要的朋友可以参考一下#xff0c;希望对大家有所帮助。高度相同#xff0c;而宽度不一样的布局#xff0c;称之为木桶布局。它有几个鲜明的特点#xff1a; 每行的图片…本篇文章给大家通过代码示例介绍一下使用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 i0; ivar img document.createElement(img);img.src src[Math.floor(Math.random()*5)];wrap.appendChild(img);}效果图更多炫酷CSS3、html5、javascript特效代码尽在js特效大全
