图片瀑布布局很好看,以前也看过别人实现的一些方法,大部分是用js实现的,今天试了一下,用CSS3简单的实现了类似的布局效果,希望对大家有用
使用CSS3的多列column实现瀑布流效果,涉及到CSS3的时候,我们首先要抛弃的是IE,然后再跑到高版本的FireFox或者Chrome等浏览器去看效果。
效果图:
CSS3代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
.container {
-webkit-column-
width
:
160px
;
-moz-column-
width
:
160px
;
-o-colum-
width
:
160px
;
-webkit-column-gap:
1px
;
-moz-column-gap:
1px
;
-o-column-gap:
1px
;
}
div:not(.container) {
-webkit-border-radius:
5px
;
-moz-border-radius:
5px
;
border-radius:
5px
;
background
:
#D9D9D9
;
border
::
#CCC
1px
solid
;
display
:inline-
block
;
width
:
157px
;
position
:
relative
;
margin
:
2px
;
}
|