Three ways to implement waterfall flow layout

Preface

When I was browsing Xianyu today, I noticed that the height of each row was not the same. After learning about it, I realized that this was a waterfall flow layout. It felt very interesting, so I decided to study it and found some solutions on the Internet. There are about 3 ways to implement waterfall flow.

1. JS realizes waterfall flow

Thought Analysis

The waterfall flow layout is characterized by equal width and unequal height.
In order to minimize the gap in the last row, starting from the second row, you need to place the picture below the shortest picture in the first row, and so on.
The parent element is set to relative positioning, and the element containing the image is set to absolute positioning. Each element is then positioned by setting the top and left values.

Code Implementation

<!DOCTYPE html>
<html>
<head>
    <style>
        .box {
            width: 100%;
            position:relative;
        }
        .item {
            position: absolute;
        }
        .item img{
            width: 100%;
            height:100%;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="item">
        <img src="banner.jpg" alt="" />
    </div>
    <div class="item">
        <img src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img src="banner.jpg" alt="" />
    </div>
    <div class="item">
        <img src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img src="banner.jpg" alt="" />
    </div>
    <div class="item">
        <img src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img src="banner.jpg" alt="" />
    </div>
</div>
</body>
<script src="jquery.min.js"></script>
<script>
    function waterFall() {
        // 1 Determine the width of the image - scroll bar width var pageWidth = getClient().width-8;
        var columns = 3; //3 columns var itemWidth = parseInt(pageWidth/columns); //Get the width of the item $(".item").width(itemWidth); //Set to the width of the item var arr = [];
        $(".box .item").each(function(i){
            var height = $(this).find("img").height();
            if (i < columns) {
                // 2 The first line is laid out in order$(this).css({
                    top:0,
                    left:(itemWidth) * i+20*i,
                });
                //Push the row height into the array arr.push(height);
            } else {
                // Other lines // 3 Find the minimum height and its index in the array var minHeight = arr[0];
                var index = 0;
                for (var j = 0; j < arr.length; j++) {
                    if (minHeight > arr[j]) {
                        minHeight = arr[j];
                        index = j;
                    }
                }
                // 4 Set the first box position of the next row // The top value is the height of the smallest column $(this).css({
                    top:arr[index]+30, //Set the distance to 30 left:$(".box .item").eq(index).css("left")
                });

                // 5 Modify the height of the minimum column // The height of the minimum column = the current height + the height of the spliced column arr[index] = arr[index] + height+30; // Set a distance of 30}
        });
    }
    //clientWidth handles compatibility function getClient() {
        return {
            width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
            height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
        }
    }
    // Triggered in real time when the page size changes window.onresize = function() {
        //Redefine the waterfall flowwaterFall();
    };
    // Initialize window.onload = function(){
        //Realize waterfall flowwaterFall();
    }
</script>
</html>

The effect is as follows

2. Column multi-line layout to achieve waterfall flow

Thought analysis:

Column mainly relies on two properties to implement waterfall flow.
One is the column-count attribute, which is how many columns it is divided into.
One is the column-gap property, which sets the distance between columns.

Code implementation:

<!DOCTYPE html>
<html>
<head>
    <style>
        .box {
            margin: 10px;
            column-count: 3;
            column-gap: 10px;
        }
        .item {
            margin-bottom: 10px;
        }
        .item img{
            width: 100%;
            height:100%;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="item">
        <img src="banner.jpg" alt="" />
    </div>
    <div class="item">
        <img src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img src="banner.jpg" alt="" />
    </div>
    <div class="item">
        <img src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img src="banner.jpg" alt="" />
    </div>
    <div class="item">
        <img src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img src="banner.jpg" alt="" />
    </div>
</div>
</body>

The effect is as follows:

3. Flex layout to achieve waterfall flow

Thought analysis:

To achieve waterfall flow with flex, the outermost element needs to be set to display: flex, that is, horizontal arrangement. Then set flex-flow: column wrap to wrap the columns. Set height: 100vh to fill the height of the screen to accommodate child elements. The width of each column can be set using the calc function, i.e. width: calc(100%/3 - 20px). Divide into 3 columns of equal width minus the left and right margins.

Code implementation:

<!DOCTYPE html>
<html>
<head>
    <style>
        .box {
          display: flex;  
          flex-flow:column wrap;
          height: 100vh;
        }
        .item {
            margin: 10px;
            width: calc(100%/3 - 20px);
        }
        .item img{
            width: 100%;
            height:100%;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="item">
        <img src="banner.jpg" alt="" />
    </div>
    <div class="item">
        <img src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img src="banner.jpg" alt="" />
    </div>
    <div class="item">
        <img src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img src="banner.jpg" alt="" />
    </div>
    <div class="item">
        <img src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img src="show.jpg" alt="" />
    </div>
    <div class="item">
        <img src="cloth.jpg" alt="" />
    </div>
    <div class="item">
        <img src="banner.jpg" alt="" />
    </div>
</div>
</body>

The effect is as follows:

4. Comparison of 3 methods

If it is just a simple page display, you can use column multi-column layout and flex flexible layout. If you need to add data dynamically, or set the number of columns dynamically, you need to use JS + jQuery.

The above are three ways to implement waterfall flow layout introduced by the editor. I hope it will be helpful to everyone. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!

You may also be interested in: