Two ways to implement image waterfall flow in js (with code)

What is a picture waterfall flow

You can clearly see what a picture waterfall flow looks like by using the picture layout of a petal web page:

To put it simply, there are many pictures tiled on the page. Each picture has the same width but different heights. It looks like n columns are arranged in an orderly manner. Waterfall, so there is a picture of waterfall flow.

Principle of implementation

1. The first way

The premise of the first way is: the picture The width is fixed, but the columns are variable (according to the screen size)

Through the above introduction, we know that the prerequisite for realizing waterfall flow is that the width is consistent (if it is 100px), and the height can be different.

[Related course recommendations: JavaScript video tutorial]

Let’s first Determine the number of columns to arrange (if it is 4 columns), then only 4 pictures can be placed in the first row, and then put the height of each picture into an array (if it is heightArr = [100,50, 200,30] ), when we put the next picture, we need to determine which height in this array is the smallest (here is 30), and then we also need to know the index of the height array where the smallest height is (here is i = 3), Then we can position this picture:

{
    position: absolute;
    left: i*100 + 'px';
    top: 30 + 'px'
}

Just traverse the remaining pictures in this way.

Implementation code

The following is the unprocessed original code. There are many blank spaces between the pictures, which affects the appearance.

The following is the processed code:

2. The second method

The premise of the second method is: the number of columns is fixed, and then the image is adaptively scaled according to the width of the screen.

In this method, since the image can be scaled, the width and height are difficult to determine, so it is difficult to use positioning.

We can handle it this way. Now that we know the columns, we can make a container for each column. Then iterate through the pictures and put the pictures into the container with the smallest container height.

Here we use js to add images instead of writing them in html in advance.

Implementation code

This article comes from the js tutorial column, welcome to learn!

The above is the detailed content of Two ways to implement image waterfall flow in js (with code). For more information, please follow other related articles on the PHP Chinese website!