CssWaterfallsLayoutActual:Column-countProperties achieve a picture wall (with complete code)
For the first time i saw the waterfall pattern, i was deeply attracted to such a false arrangement. Unlike traditional grid layouts, waterfalls allow different heights of content to flow naturally, creating unique visual rhythms. For photographers, content creators, this layout maximizes the glamour of their work. The css's column-count properties may be the fastest solution to this effect。
1. Core principles of waterfall flow layout
At the heart of the waterfall stream layout is the natural filling of available spaces like water. The traditional grid layout requires a high degree of consistency in all projects, while the waterfall stream allows the project to move at a high level of freedom and automatically search for the most suitable location。
The principle of the column-count is simple: it divides the packaging into a column of a specified quantity, and the contents are filled from top to bottom in order of each column. When a column is filled, the contents flow automatically to the next column. This approach has several advantages:
However, attention should also be paid to its limitations: the content between columns may be highly uneven, especially when content is dynamically loaded. However, this is usually not a major problem with static content presentations。
2. Column-count base realization
Let us start with the most basic realization. Assuming we have a container containing multiple pictures, each one has different heights. The following are the steps towards implementation:
Corresponding css key code:
. Masonry-coNtainer
column-count: 3;
column-gap: 15 px;
♪ i'm sorry ♪
. Masonry-item
break-inside: avoid;
margin-bottom: 15px;
♪ i'm sorry ♪
. Masonry-item img
width: 100 per cent;
height: auto;
display: block;
♪ i'm sorry ♪This code worked:
Split packagings into 3 columns with 15 px
