Comment implémenter la disposition du barillet d'image en CSS3 ? (avec code)-tutoriel CSS-php.cn

Comment implémenter la disposition du barillet d'image en CSS3 ? (avec code)

青灯夜游

Libérer： 2020-07-14 10:00:58

avant

2926 Les gens l'ont consulté

Cet article vous présentera la méthode d'utilisation de CSS3 pour implémenter la disposition du barillet d'image à travers des exemples de code. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Comment implémenter la disposition du barillet d'image en CSS3 ? (avec code)

Une disposition avec la même hauteur mais des largeurs différentes est appelée une disposition en tonneau. Il présente plusieurs caractéristiques distinctives : les images de chaque rangée sont très cohérentes ; les images de chaque rangée sont pleines.

Idées :

1. Disposition flexible du conteneur
2 Définissez la hauteur de l'image et dépassez le saut de ligne
3. : 1 pour toutes les images ; pour remplir toute la ligne
4. Définissez object-fit: cover; pour toutes les images pour résoudre le problème de déformation de l'image
5. Conteneur : après les ensembles de pseudo-classes flex-grow : 9999. ; et la valeur est suffisamment élevée pour résoudre le problème lorsque le nombre d'images dans la dernière ligne est petit. Encore plein de lignes entières et trop plat et long

Le code est le suivant, copiez et utilisez :

<!DOCTYPE html>
    <script>
        window.navigator.appVersion.indexOf(&#39;Trident&#39;) != -1 && alert(&#39;请用谷歌或火狐新版打开！&#39;);
    </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: &#39;&#39;;
            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(&#39;.wrap&#39;);
        var src = [&#39;img/1.jpg&#39;,&#39;img/2.jpg&#39;,&#39;img/3.jpg&#39;,&#39;img/4.jpg&#39;,&#39;img/5.jpg&#39;]
        for(var i=0; i<Math.floor(Math.random()*10+30); i++){
            var img = document.createElement(&#39;img&#39;);
            img.src = src[Math.floor(Math.random()*5)];
            wrap.appendChild(img);
        }
    </script>
</body>
</html>

Copier après la connexion

Rendu :

Comment implémenter la disposition du barillet dimage en CSS3 ? (avec code)