Remember before
To make title party water again, recently do you want to be when writing online post-it waterfalls flow, after various methods to find online, found either use js to implementation, or need to took the parcel of the waterfall, I want to find one of the most simple way, only need to CSS and there’s no need to can easily realize the waterfall flow respectively. After my careful search, I finally found it.
The magic ofcolumn-count
Column-count is interpreted in MDN like this: The column-countcss attribute decompositions the contents of an element into the specified number of columns.
As shown in the figure:
Column-gap this CSS attribute is used to set the size of the gutter between the columns of an element. Better effect.
As shown in the figure:
breakproofbreak-inside
The only problem with setting column-count is that it keeps your bottom line on a single line by default, which can cause content to break, like this:
Just set it to break-inside: avoid; You can avoid content breaking by adding tags to.box-wrapper with the.box class.
But the downside
Having said the advantages, of course there are disadvantages. First, take a look at the compatibility, as shown in the picture:
Emmm, it looks ok, but it’s all light green, and then look at the break-inside
Is also a look, mostly light green, compatible seems not particularly good.
Another disadvantage is that every time you add a new item, the column will be rearranged and the page will flicker and jump. It is not a very good experience. If you want to experience it, you can go to my online post-it notes and try it out (I suggest using Google Browser), haha.
This is my demo code, interested can download to have a look, ha ha ha.
Afterword.
From a perfect point of view, this is not a qualified waterfall flow mode, but it is really very simple and convenient to implement waterfall flow, CSS culture extensive and profound, EMMM, feel there are many unknown areas to explore, come on together.