How to implement image barrel layout in CSS3? (with code)-CSS Tutorial-php.cn

How to implement image barrel layout in CSS3? (with code)

青灯夜游

Release： 2020-07-14 10:00:58

forward

2833 people have browsed it

This article will introduce to you through code examples how to use CSS3 to implement image barrel layout. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

How to implement image barrel layout in CSS3? (with code)

The layout with the same height but different widths is called barrel layout. It has several distinctive features: the pictures in each row are highly consistent; the pictures in each row are full.

Ideas:

1. Container flex layout
2. Set the height of the picture and exceed the line break
3. Set flex-grow: 1 for all pictures; to fill the entire row
4. Set object-fit: cover; for all pictures to solve the problem of picture deformation
5. Container: after pseudo-class sets flex-grow: 9999; and the value is high enough to solve the problem when the number of pictures in the last row is small. Still full of the whole line and too flat and long

The code is as follows, copy it and use it:

<!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>

Copy after login

Rendering:

How to implement image barrel layout in CSS3? (with code)

More cool CSS3, html5, javascript special effects codes, all in: js special effects collection!

The above is the detailed content of How to implement image barrel layout in CSS3? (with code). For more information, please follow other related articles on the PHP Chinese website!