Three ways to implement waterfall flow layout

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:
  • How to use JS to implement waterfall layout of web pages
  • js to achieve waterfall flow layout (infinite loading)
  • How to implement waterfall layout with one line of JavaScript code
  • Implementation of js waterfall flow layout
  • Implementing waterfall flow layout based on JavaScript

<<:  Basic usage of wget command under Linux

>>:  Simple implementation of html hiding scroll bar

Recommend

VMware + Ubuntu18.04 Graphic Tutorial on Building Hadoop Cluster Environment

Table of contents Preface VMware clone virtual ma...

Learn SQL query execution order from scratch

The SQL query statement execution order is as fol...

Detailed explanation of routing configuration in Linux system with multiple network cards

Routing configuration commands under Linux 1. Add...

Three ways to implement text color gradient in CSS

In the process of web front-end development, UI d...

MySQL slow query operation example analysis [enable, test, confirm, etc.]

This article describes the MySQL slow query opera...

MySQL advanced features - detailed explanation of the concept and mechanism of data table partitioning

Table of contents Partitioning mechanism SELECT q...

MySQL quickly obtains the table instance code without primary key in the library

Overview Let's summarize some SQL statements ...

MySQL deadlock routine: inconsistent batch insertion order under unique index

Preface The essence of deadlock is resource compe...

Selection and thinking of MySQL data backup method

Table of contents 1. rsync, cp copy files 2. sele...

How to extract string elements from non-fixed positions in MySQL

Preface Note: The test database version is MySQL ...

Alignment issue between input text box and img verification code (img is always one head higher than input)

In web page production, input and img are often pl...

A brief discussion on how to cancel requests and prevent duplicate requests in axios

Table of contents Preface Core - CancelToken Prac...

The forgotten button tag

Note: This article has been translated by someone ...

CSS3 implements missing corner rectangle, folded corner rectangle and missing corner border

Preface A few days ago, I came across the feature...

JavaScript typing game

This article shares the specific code of JavaScri...