Jquery实现的瀑布流布局，可以自适应浏览器大小。调用时只需要传入模块个数，每行的个数，模块边距即可快速动态生成瀑布流布局页面。通过重写每个模块的CSS或者内部元素，即可适用于您的风格或者需求。
源代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
var WaterFlow = {
data:null,
mWidth: "0",
initialize: function(allNum,aCell,margin) {
var mMargin=margin;
this.mWidth =$("#Main").width()>600?$("#Main").width():600;
if(aCell*margin>=this.mWidth)
{
alert("行数太多");
return;
}
$container = $("<div></div>");
$container.css({
"width": this.mWidth "px"
});
$("#Main").append($container);
var rowsNub = aCell;
//总共有多少行
var allRows=allNum%aCell>0?Math.floor(allNum / aCell) 1:Math.floor(allNum / aCell) 1;
var childheight = "250";
//高度数组
var topArray =new Array();
for(var i=0;i<aCell;i ){
topArray[i]=0;
}
for (var i = 0; i < allNum; i ) {
childheight = parseInt(Math.random() * (300 - 150) 150);
//宽度数
var childWidth = (this.mWidth - mMargin * (rowsNub - 1)) / rowsNub;
//第几层
var rows = (i 1) % rowsNub > 0 || i == 0 ? Math.floor((i 1) / rowsNub) 1 : Math.floor((i 1) / rowsNub);
//计算出改板块是横排的第几个
var index = i % aCell;
//该层的top
childTop = topArray[index] (rows - 1) * mMargin;
$mItem = $("<div></div>");
$mItem.css({
"width": childWidth "px",
"height": childheight "px",
"position": "absolute",
"marginTop":topArray[index] "px","margin-left":childWidth * index "px",
"border": "1px solid #ccc","background-color":"#f6f5ec"
});
$mItem.animate({
marginLeft: childWidth * index (index * mMargin) "px",
marginTop: childTop "px",height:childheight "px",
}, 1000);
$container.append($mItem);
topArray[index] = childheight;
}
$("#Main").css("height",this.SortHeightHandler(topArray) mMargin*(allRows-1) "px");
},
SortHeightHandler:function(array) {
for (var i = 0; i < array.length; i ) {
for (var j = i 1; j < array.length; j ) {
if (array[i] < array[j]) {
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
}
}
return array[0];
}
}
|
