demo
思路：
我手里有一堆图片，想要按一定的规则去摆放他们，嗯，瀑布流先设置图片宽度相等，因为跟摆放规则有关的，规则就是在父容器里啊，摆成n列，这个n，就是父容器的宽度除以图片的绝对宽度得到的那个整数了。
确定摆几列了，就开始摆放了。
当第一个图片开始加载了，把它放第一列第一的位置，第二个图片加载了，放第二列，，，以此类推，直到第n列摆好了。
这时候，第n+1张图加载了，放第几列的下面？规则是放到现在列的高度最低的那列，这规则一直持续到最后，所以，之后每个图片加载了，放在哪里，都要判断下，此时的哪列的高度最低，放好图片后，这个列的高度就加上这图片的绝对高度。这就是逻辑了。怎么用代码操作了？
- 图片放的时候，位置就是要绝对定位的，top值就是那个最低列的高度，就是之前加到这个列的图片的高度之和。left值就是图片的宽度乘以，它的列的序数减一的值。
- 需要一个数组，数组的长度代表有多少列，数组的里面的位的值代表对应列的高度。比较出哪一列的高度最低，就是要遍历数组，比较得出，最后，再把高度更新一下。每当一张图片加载了，就比较一次，放一次图片，再更新下高度。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>瀑布流</title>
<style>
.waterfall {
max-width: 600px;
border: 1px solid;
}
img {
position: absolute;
width: 100px;
margin: 10px;
transition: all .4s;
}
</style>
</head>
<body>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<div class="waterfall">
</div>
<script>
var imgwid = $('.waterfall img').outerWidth(true)
var count = Math.floor($('.waterfall').width() / imgwid)
var heiarr = []
for (var i = 0; i < count; i++) {
heiarr[i] = 0
}
$('.waterfall img').on('load', function() {
var minval = heiarr[0]
var minindex = 0
for (var i = 0; i < count; i++) {
console.log(heiarr)
if (heiarr[i] < minval) {
minval = heiarr[i]
minindex = i
}
}
console.log(minval, minindex)
console.log(minindex * imgwid)
$(this).css({
left: minindex * imgwid,
top: minval
})
heiarr[minindex] += $(this).outerHeight(true)
})
</script>
</body>
</html>
网友评论