Home >Web Front-end >CSS Tutorial >How to implement image barrel layout in CSS3? (with code)

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

青灯夜游forward: 2020-07-14 09:59:182967browse

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.

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>

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!

Statement：

This article is reproduced at:cnblogs.com. If there is any infringement, please contact admin@php.cn delete

Previous article：What are the ways to hide elements in css? What's the difference?Next article：What are the ways to hide elements in css? What's the difference?

See more

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

Related articles