本篇文章給大家通過代碼示例介紹一下使用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如何实现图片木桶布局？（附代码）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。