如何用CSS3实现瀑布流效果

html-css019

如何用CSS3实现瀑布流效果,第1张

1、该效果使用CSS3的column-width实现,和js版的瀑布流不同:图片将纵向排列。

2、代码中使用了一小段JS,和瀑布流效果无关,主要用来动态插入元素,并实现模拟翻页

举例说明 如图:

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