瀑布流布局效果目前来说还是挺流行的,从网页到手机应用,都能见到瀑布流的身影。网上也有很多关于这个的介绍,这里就稍微介绍下,留个备份存档
相比较手机应用来说,感觉网页上的瀑布流布局效果实现简单很多,因为我们有现成的jQuery插件可以用,只要稍微的引用一下,再写那么一两句调用代码,然后就没我们什么事了,瀑布流就这么呈现出来了。
效果图:
Wookmark这个插件的用法也是相当的简单。
引入jQuery和wookmark
1
2
|
<script
type
=
"text/javascript"
src
=
"http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
>
</script>
<script
type
=
"text/javascript"
src
=
"http://www.wookmark.com/js/jquery.wookmark.min.js"
>
</script>
|
HTML代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<style>
#tiles
{
position
:
relative
}
</style>
<
ul
id
=
"tiles"
>
<
li
>
<
img
src
=
"images/image_1.jpg"
width
=
"200"
height
=
"283"
>
<
p
>
1
<
/
p
>
<
/
li
>
<
li
>
<
img
src
=
"images/image_2.jpg"
width
=
"200"
height
=
"300"
>
<
p
>
2
<
/
p
>
<
/
li
>
<
li
>
<
img
src
=
"images/image_3.jpg"
width
=
"200"
height
=
"252"
>
<
p
>
3
<
/
p
>
<
/
li
>
<
li
>
<
img
src
=
"images/image_4.jpg"
width
=
"200"
height
=
"158"
>
<
p
>
4
<
/
p
>
<
/
li
>
<
li
>
<
img
src
=
"images/image_5.jpg"
width
=
"200"
height
=
"300"
>
<
p
>
5
<
/
p
>
<
/
li
>
<
li
>
<
img
src
=
"images/image_6.jpg"
width
=
"200"
height
=
"297"
>
<
p
>
6
<
/
p
>
<
/
li
>
<
li
>
<
img
src
=
"images/image_7.jpg"
width
=
"200"
height
=
"200"
>
<
p
>
7
<
/
p
>
<
/
li
>
<
li
>
<
img
src
=
"images/image_8.jpg"
width
=
"200"
height
=
"200"
>
<
p
>
8
<
/
p
>
<
/
li
>
<
li
>
<
img
src
=
"images/image_9.jpg"
width
=
"200"
height
=
"398"
>
<
p
>
9
<
/
p
>
<
/
li
>
<
li
>
<
img
src
=
"images/image_10.jpg"
width
=
"200"
height
=
"267"
>
<
p
>
10
<
/
p
>
<
/
li
>
<
li
>
<
img
src
=
"images/image_1.jpg"
width
=
"200"
height
=
"283"
>
<
p
>
11
<
/
p
>
<
/
li
>
<
li
>
<
img
src
=
"images/image_2.jpg"
width
=
"200"
height
=
"300"
>
<
p
>
12
<
/
p
>
<
/
li
>
<
li
>
<
img
src
=
"images/image_3.jpg"
width
=
"200"
height
=
"252"
>
<
p
>
13
<
/
p
>
<
/
li
>
<
/
ul
>
|
应用wookmark
1
2
3
4
5
6
7
8
|
$
(
document
)
.
ready
(
new
function
(
)
{
$
(
'#tiles li'
)
.
wookmark
(
{
autoResize
:
true
,
// 当浏览器大小改变时是否自动调整
container
:
$
(
'#tiles'
)
,
// 父容器,这个要注意的一点是该容器需要有 position: relative 属性。
offset
:
2
,
// 每个元素之间的距离
itemWidth
:
210
// 每个元素的宽度,瀑布流高度是不限制的,所以只要宽度固定就可以了
}
)
;
}
)
;
|