css 瀑布流布局问题 高手进

html-css010

css 瀑布流布局问题 高手进,第1张

这种瀑布流实现大体有两种方式，一种就是js的方式，一种是css，相对于js来说css的控制不是很好，不能自动加载之类的，只能显示一个瀑布流效果，大体的思路就是一个div里面放两个div分别浮动，高度自动，然后将图片分别放置到这两个div里面，这样就出现一个类似于瀑布流的效果了，当然了这个伪瀑布流的弊端就是如果一列的图片都是很高的，一列都是很矮的图片看着会很不协调。大体就是这个样子

列数固定，嵌套较多

· 滚动加载更多数据时，需要指定插入到第几列中，不方便。

2、CSS3样式定义法

我们将要用到的是CSS3新加的column属性，通过指定容器的列个数column-count，列间距column-gap，列中间的边框(间隔边线)column-rule，列宽度column-width实现。

优点：

· 直接用CSS定义，方便快捷，是最好不过了；

· 扩展方便。

column-count :指定元素应该分为的列数

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 //防止断裂