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

How to use CSS styles and selectors

Three ways to use CSS in HTML: 1. Inline style: s...

How to set up automatic daily database backup in Linux

This article takes Centos7.6 system and Oracle11g...

Python virtual environment installation and uninstallation methods and problems encountered

Ubuntu16.04 install and uninstall pip Experimenta...

MySQL 5.7.17 installation tutorial with solutions to the problem that the MySQL service cannot be started

For .net development, I am more familiar with Mic...

How to disable IE10's password clear text display and quick clear function

IE10 provides a quick clear button (X icon) and a ...

Analysis of the principle of MySQL large table extraction mode from the perspective of cloud data migration service

Summary: What method should be used for MySQL JDB...

Various ways to achieve the hollowing effect of CSS3 mask layer

This article introduces 4 methods to achieve mask...

Docker container data volume named mount and anonymous mount issues

Table of contents What is a container data volume...

Detailed explanation of the implementation process of dual-master synchronization of partial tables in MySQL 5.7

Preface Recently, I encountered a requirement. Du...

MySQL 5.7.21 winx64 free installation version configuration method graphic tutorial

MySQL 5.7.21 winx64 free installation version con...

Detailed explanation of FTP server configuration and 425 error and TLS warning solutions for FileZilla Server

123WORDPRESS.COM provides you with the FileZilla ...

Solution to the problem that docker logs cannot be retrieved

When checking the service daily, when I went to l...

Docker image import and export code examples

Import and export of Docker images This article i...

MySQL 8.0.20 installation and configuration method graphic tutorial under Windows 10

Win10 system locally installed MySQL8.0.20, perso...

Mysql experiment: using explain to analyze the trend of indexes

Overview Indexing is a skill that must be mastere...