column-fill:指定css如何填充列
column-gap:指定列之间的差距
column-rule:对于设置所有column-rule-*属性的简写属性
column-rule-color:指定列之间的颜色规则
column-rule-style:指定列之间的样式规则
column-rule-width:指定列之间的宽度规则
column-span:指定元素应该跨越多少列
column-width:指定列的宽度
columns缩写属性设置列宽和列数
break-inside: avoid //防止断裂
这种瀑布流实现大体有两种方式,一种就是js的方式,一种是css,相对于js来说css的控制不是很好,不能自动加载之类的,只能显示一个瀑布流效果,大体的思路就是一个div里面放两个div分别浮动,高度自动,然后将图片分别放置到这两个div里面,这样就出现一个类似于瀑布流的效果了,当然了这个伪瀑布流的弊端就是如果一列的图片都是很高的,一列都是很矮的图片看着会很不协调。大体就是这个样子列数固定,嵌套较多· 滚动加载更多数据时,需要指定插入到第几列中,不方便。
2、CSS3样式定义法
我们将要用到的是CSS3新加的column属性,通过指定容器的列个数column-count,列间距column-gap,列中间的边框(间隔边线)column-rule,列宽度column-width实现。
优点:
· 直接用CSS定义,方便快捷,是最好不过了;
· 扩展方便。