瀑布流的效果布局图标瀑布流显示是什么意思( 二 ) _生活百科

column-width: 设置每列宽度，列数由总宽度与每列宽度计算得出

column-gap: 设置列与列之间的间距

column-count和 column-width都可以用来定义分栏的数目，而且并没有明确的优先级之分。优先级的计算取决于具体的场景。
计算方式为：计算 column-count和 column-width转换后具体的列数，哪个小就用哪个。
一个图片&文字的例子：

文章插图
…

文章插图
…
.masonry{ column-count: 3; column-gap: 10px;}.masonry .item{ border:1px solid #999; margin-bottom: 10px;}.masonry .item img{ width: 100%;}
【瀑布流的效果布局图标瀑布流显示是什么意思】在线Demo及完整代码地址：
效果如下：

文章插图
我们可以看到，虽然实现了瀑布流的效果，但奇怪的是例子中前两列的最后一个元素的文本内容被自动断开，一部分在当前列尾，一部分在下一列的列头。
我的理解是 multi-column布局会将其内的元素自动进行流动和平衡，尽可能保证每列的高度趋于相同，所以会将其内的文本阶段分布在两列内。
而这种展示方式无疑是我们不希望看到的，我们希望的是每个元素都是独立的，前后不断开，此时我们需要使用 break-inside来实现。
break-inside: auto | avoid

auto: 元素可以中断

avoid: 元素不能中断

修改一下之前的例子：
.masonry .item{ break-inside: avoid;}
在线Demo及完整代码地址：
效果如下：

文章插图
效果实现了，但由于 multi-column布局中子元素的排列顺序是先从上往下再从左至右，所以这种方式仅适用于数据固定不变的情况，对于滚动加载更多等可动态添加数据的情况就并不适用了。
grid 布局实现瀑布流
Grid布局是最强大的 CSS 布局方案。
它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。

文章插图
上图这样的布局，就是 Grid 布局的拿手好戏，因此，我们就可以用 Grid来实现瀑布流。
为实现瀑布流先介绍以下几个属性：

display:设置为 grid指明当前容器为 Grid布局

grid-template-columns: 定义每一列的列宽

grid-template-rows: 定义每一行的行高

column-gap：用于设置列间距

grid-template-columns和 grid-template-rows ，可以使用绝对单位，也可以使用百分比。并且为了表示比例关系， Grid布局提供了 fr关键字，如果设置 1fr和 2fr ，表示后者是前者的两倍。
根据以上几个属性，先写一个例子出来，看看效果：
.masonry{ display: grid; grid-template-rows: 1fr 1fr 1fr; // 分为3行 grid-template-columns: 1fr 1fr 1fr; // 分为3列 column-gap:5px; // 列间距5px}
在线Demo及完整代码地址：
效果如下：

文章插图
我们看到高度不同的div块分布在每一个单元格内，但还没有实现瀑布流的效果。
为实现瀑布流再介绍几个属性：

grid-row-start：上边框所在的水平网格线

grid-row-end：下边框所在的水平网格线

grid-column-start：左边框所在的垂直网格线

grid-column-end：右边框所在的垂直网格线

那么什么是网格线呢?
划分网格的线，称为网格线。水平网格线划分出行，垂直网格线划分出列。
正常情况下， n行有 n+1根水平网格线， m列有 m+1根垂直网格线，比如三行就有四根水平网格线。

文章插图
上图是一个 4 x 4 的网格，共有5根水平网格线和5根垂直网格线。
这4个属性可接收如下属性：

瀑布流的效果布局 图标瀑布流显示是什么意思( 二 )

瀑布流的效果布局图标瀑布流显示是什么意思( 二 )