您好,登錄后才能下訂單哦!
這篇文章主要講解了CSS3中圖片木桶布局是怎么實(shí)現(xiàn)的,內(nèi)容清晰明了,相信大家閱讀完之后會(huì)有幫助。
高度相同,而寬度不一樣的布局,稱之為木桶布局。它有幾個(gè)鮮明的特點(diǎn): 每行的圖片高度一致;每行的圖片都是占滿的。
思路:
1、容器flex布局
2、圖片定高、超出換行
3、圖片都設(shè)置 flex-grow: 1; 以充滿整行
4、圖片都設(shè)置 object-fit: cover; 以解決圖片變形
5、容器 :after 偽類 設(shè)置 flex-grow: 9999; 且值足夠高 以解決最后一行圖片數(shù)量少時(shí)仍然充滿整行過于扁長
代碼如下,復(fù)制即可使用:
<!DOCTYPE html> <script> window.navigator.appVersion.indexOf('Trident') != -1 && alert('請(qǐng)用谷歌或火狐新版打開!'); </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 = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.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>
看完上述內(nèi)容,是不是明白了CSS3中圖片木桶布局是怎么實(shí)現(xiàn)的,如果還想學(xué)習(xí)更多內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。