Summary of three ways to realize waterfall flow layout

Time:2020-2-16

Preface

Today, I observed that the height of each line was not the same when I was wandering around the fish. I learned that it was originally a waterfall layout, which was very interesting. So I decided to study it and found some solutions on the Internet. There are about three ways to realize waterfall flow.

1、 JS realizes waterfall flow

Thinking analysis

  • The layout of waterfall is characterized by equal width and unequal height.
  • To minimize the gap in the last line, start with the second line and place the image below the shortest image in the first line, and so on.
  • The parent element is set to relative positioning, and the element of the picture 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 picture - 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 the width to item
        var arr = [];
        $(".box .item").each(function(i){
            var height = $(this).find("img").height();
            if (i < columns) {
                //2 the first line is arranged in order
                $(this).css({
                    top:0,
                    left:(itemWidth) * i+20*i,
                });
                //Push row height to array
                arr.push(height);
            } else {
                // other lines
                //3 find the minimum height in the array and its index
                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 on the next line
                //The top value is the height of the minimum column
                $(this).css({
                    Top: arr [index] + 30, // set the distance of 30
                    left:$(".box .item").eq(index).css("left")
                });

                //5 modify the height of the minimum column
                //Minimum column height = current own height + spliced height
                Arr [index] = arr [index] + height + 30; // set the distance of 30
            }
        });
    }
    //Clientwidth handling compatibility
    function getClient() {
        return {
            width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
            height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
        }
    }
    //Real time trigger when page size changes
    window.onresize = function() {
        //Redefining waterfall flow
        waterFall();
    };
    // initialization
    window.onload = function(){
        //Realize waterfall flow
        waterFall();
    }
</script>
</html>

The effect is as follows
 

图片是

2、 Column multi line layout for waterfall flow

Thought analysis:

The implementation of waterfall flow in column mainly depends on two properties.
One is the column count property, which is how many columns are divided.
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 flexible layout for waterfall flow

Thought analysis:

Flex to implement waterfall flow, you need to set the outermost element to display: flex, that is, to arrange horizontally. Then wrap it by setting flex flow: column wrap. Set height: 100vh to fill the height of the screen to accommodate the child elements. The width of each column can be set by the calc function, that is, width: Calc (100% / 3 – 20px). Divide into three equal width columns and subtract the margin distance of the left and right two times.

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 three ways

If it’s 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 is the whole content of this article. I hope it will help you in your study, and I hope you can support developepaer more.

Recommended Today

What is Baidu’s secure openrasp project?

What is Baidu‘s secure openrasp project? In the history of this article, the official account is from the public technology. Welcome to redistribute and share knowledge, and respect copyright tagging authors and sources. At the end of the conversation, c0debreak opened a “confidential document” for me to see. It’s a secret that a otaku has […]