Show results:

Waterfall layout is a common layout in web design, and it is generally used for multi-column display of pictures. The column width is fixed, and the pictures are adaptively staggered according to their own height.

Features:

Equal width and different height, multi-column layout;
As the page scroll bar scrolls down, the data block is continuously loaded and appended to the current tail;
After each row is full, new pictures are added to the back
The window size changes and the layout is recalculated

advantage

Save Space: Reduce Page Complexity
Very friendly to touch screen devices: by swiping up to browse, the interaction method is more intuitive
Good visual experience: When browsing, it will not be affected by the neat height of the page, and it will be uneven, reducing the fatigue of browsing

shortcoming

The total length of the content cannot be grasped
When there is too much data, it is easy to cause the load of page loading
Difficult to locate last viewed content when reloading

Ideal effect:

The column width is fixed, and the pictures are adaptively staggered according to their own height;
Arrangement rules: the first row of pictures is arranged in order to fill a row, and the subsequent pictures are placed under the column with the smallest height according to the rules;
The picture bottoms out and is updated, loaded on demand;
The window size changes, and the number of columns of the adaptive picture;
Bottom alignment;

Implementation

1. Pure CSS implementation (multi-column multi-column layout)

use attributes

column-count : define the number of columns
column-gap : the interval between columns

features

The order can only be from top to bottom , then left to right

shortcoming

Since the arrangement order is from top to bottom , then left to right , it can only be used for data fixation, and cannot be dynamically loaded and appended . It cannot be realized for scrolling to the bottom to load new data.

4. Notes:

Sometimes the content of the last element that appears in the first few columns of the page is automatically disconnected, part of it is at the end of the current column, and part of it is at the head of the next column. At this time, the sub-element can be controlled by setting break-inside to avoid being truncated , as follows

break-inside: avoid ; // Not truncated The default value is auto, it will be truncated

5. Implementation ideas:

The outer box defines the number of columns and column spacing
Set break-inside: avoid for each item; so that it will not be truncated

Two, flex layout implementation

Implementation idea:

Set the outermost element to display: flex, that is, arrange it horizontally.
Set flex-flow:column wrap to make it wrap.
Set height: 100vh to fill the height of the screen to accommodate child elements.
The width of each column can be set with the calc function, namely width: calc(100%/3 - 20px). Divide into 3 columns of equal width minus the margin distance on the left and right sides.

shortcoming:

Can't add data dynamically

3. JS absolute positioning implementation (not recommended)

principle:

Accurately calculate the absolute positioning of each child element to where it should go in the waterfall flow. It needs some optimization in the later stage and is not recommended.

shortcoming:

Calculations are large and complex
There will be a high collapse problem
Because the child element is set to absolute, it will not take up the height , and if the page can be scrolled, another problem will arise
If adaptation will be done in the mobile terminal, the current absolute positioning height unit will not be automatically converted if it is px in the code implementation
When the window resize of the viewport changes, the position of the element needs to be recalculated. If events will be triggered continuously, the performance consumption will be high and the loading will be slow , which is not advisable

Key data:

number of columns
Fixed image width
gap
container width

Implementation idea:

1. Create image containers and elements

2. Absolute positioning sets the position of each picture

All child elements are set to absolute positioning

Find the position where > is the smallest in all columns

Calculate the top and left when the child element is positioned

Modify the style of child elements, set position to absolute , and set top, left

For each insertion position, select the position with the smallest height of all columns , and cycle in turn

3. Monitor window changes and reset the picture position

Define data and ui styles

data design

imgsArr_c is the new image array after adding the height attribute

Image preprocessing

Column width = width of the entire container / number of columns

image width = column width - (interval * 2)

Realize that the image is scaled according to the original ratio : image height = image width * (original image height/original image width)

If the loading fails, set the height and width of the image to be the same, and if the loading succeeds, dynamically calculate the height of the image according to the original ratio

load image

Lazy loading, preloading, compressing images

It should be noted here that the re-rendering of DOM from the change of data in vue is an asynchronous process. In vue, when the data changes, it is not rendered to the page immediately, but put on the event queue first. Then, on the next event loop, Vue flushes the event queue and performs the actual (deduplicated) work. As a result, there may be a certain delay in mounting the data on the dom after the data is changed, so immediately after the data is changed, you may get the dom element instead of the latest value but the value before the change.

Therefore, use $nextTick to solve this problem. The function of $nextTick is to execute its callback after the next dom update cycle ends. Use this method after modifying imgsArr_c to ensure that the arranged elements are updated.

Set image inline style width and height

Set up Waterfall

Set the height of the picture, top, left

first row:

top = 0
left = index * column width

N lines after the second line:

Get the column height minHeight with the lowest current height , and return its index minIndex
Math.min.apply(null, arr), means to get the smallest value in the array
top = the height value of the smallest column
left = index of smallest column * column width
Update minimum column height = original height + newly added image height