实现思路：
1、计算页面的宽度，计算出页面可放数据块的列数（如上图所示就有6列）。
2、将各个数据块的高度尺寸记入数组中（需要等所有图片加载完成，否则无法知道图片的高度）。
3、用绝对定位先将页面第一行填满，因为第一行的top位置都是一样的，然后用数组记录每一列的总高度。
4、继续用绝对定位将其他数据块定位在最短的一列的位置之后然后更新该列的高度。
5、当浏览器窗口大小改变时，重新执行一次上面1-4步以重新排放（列数随页面宽度而改变，因而需要重新排放）。
6、滚动条滚动到底部时加载新的数据进来后也是定位在最短的一列的位置之后然后更新该列的高度。
<!DOCTYPE html>
<html>
<head>
<title>js</title>
</head>
<style type="text/css">
#wrap li {
list-style: none;
border: 2px solid gray;
position: absolute;
font-size: 100px;
text-align: center;
transition: all .5s;
}
</style>
<body>
<ul id="wrap"></ul>
</body>
<script type="text/javascript"
最低0.47元/天 解锁文章
468
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
