前言：总所周知，瀑布流是一个很常见的一种布局方式，不受div的大小限制，其中针对不同高度的div做空间的充分利用，首先我们用随机高度，固定宽度生成一批div,你可以看看效果： 正文 不难发现都是杂乱无章的，都会在每行的最低框中放下一个。 Jquery如何实现瀑布流布局，那么我们先看实现出来的右侧效果。 首先实现这个效果我们可以分三步走：
确定首行各个div位置，left的偏移值，采用相对布局的方式。其次应用一个数组存储各个div的高度，找到最低高度，然后将下一个div插入到该下标div下面。当第二行的第一个div插入到第一行最低的div下面后，因为该下标的高度就变大了，所以我们要修改这个原先所谓最低的数组下标值，改成原先高度+间隙+自身div的高度，然后继续遍历插入。
只要理解好了这三点，瀑布流真的很简单。 下面我们就来看实际代码操作吧（需要demo的可以关注下留邮箱）
页面html:
<body>
<div class="allDiv1">
</div>
</body>
css样式：
.allDiv1 {
width: 30%
;
height: 100%
;
overflow-x: hidden
;
position: relative
;
}
.part1 {
box-shadow: 1px 2px 3px #eee
;
border: 1px solid #eee
;
text-align: center
;
line-height: 40px
;
color: red
;
font-size: 20px
;
position: absolute
;
}
JS模块
<script
>
var htmlStr
= "";
var _parentDom
= ".allDiv1";
var _childDom
= ".part1";
var line
= 5;
var _divNum
= 20;
$(function () {
for (var i
= 0; i
< _divNum
; i
++) {
htmlStr
+= "<div class='part1 pubu" + i
+ "'>" + i
+ "</div>";
}
$(".allDiv1").html(htmlStr
);
for (var i
= 0; i
< _divNum
; i
++) {
$(".pubu" + i
).css({ "height": randomNum(40, 100) + "px" })
}
waterFall(_parentDom
, _childDom
);
})
function randomNum(minNum
, maxNum
) {
switch (arguments
.length
) {
case 1:
return parseInt(Math
.random() * minNum
+ 1, 10);
break;
case 2:
return parseInt(Math
.random() * (maxNum
- minNum
+ 1) + minNum
, 10);
break;
default:
return 0;
break;
}
}
function waterFall(parentDom
, childDom
) {
var pageWidth
= $(parentDom
).width();
var columns
= 4;
var part1_width
= parseInt(pageWidth
/ columns
- line
);
$(childDom
).width(part1_width
);
var arr
= [];
$(childDom
).each(function (i
) {
var _height
= $(this).height();
if (i
< columns
) {
$(this).css({
top
: 0,
left
: (part1_width
+ line
) * i
});
arr
.push(_height
);
} else {
debugger;
var minHeight
= arr
[0];
var index
= 0;
for (var k
= 0; k
< arr
.length
; k
++) {
if (arr
[k
] < minHeight
) {
index
= k
;
minHeight
= arr
[k
];
}
}
$(this).css({
top
: arr
[index
] + line
,
left
: $(childDom
).eq(index
).css("left")
})
arr
[index
] = arr
[index
] + $(this).height() + line
;
}
})
}
window
.onresize = function () {
waterFall()
};
</script
>
里面所有的div都是动态生成的，所以高度是随机的，每次都不一样，这样更能测试瀑布流的实效性，喜欢我的这篇文章的您可以点个小心心么！我们一起进步！加油。
** 生活之所以艰辛，可能是你努力的还不够，加油！ —— 致陌生人 **
