瀑布流，又称瀑布流式布局。
这种布局适合于小数据块，每个数据块内容相近且没有侧重。
实现思路:管理一个数组,在里面存储每一列当前的高度,同时把当前最小的高度保存下来,每一次添加图片,同时更新每一列的高度,记录下最下高度的索引,每次添加图片,加到最小的高度那一列.通过
position: absolute;和left top来排列图片.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>瀑布流布局</title>
<style>
.waterfall {
margin: 0 auto;
position: relative;
min-height: 300px;
border: 1px solid pink;
}
.waterfall img {
width: 100px;
margin: 10px;
position: absolute;
transition: all .5s linear;
}
</style>
</head>
<body>
<div class="waterfall">
<img src="http://via.placeholder.com/100x100" alt="300*100">
<img src="http://via.placeholder.com/100x70" alt="300*70">
<img src="http://via.placeholder.com/100x150" alt="300*150">
<img src="http://via.placeholder.com/100x250" alt="300*250">
<img src="http://via.placeholder.com/100x80" alt="300*80">
<img src="http://via.placeholder.com/100x90" alt="300*90">
<img src="http://via.placeholder.com/100x120" alt="300*120">
<img src="http://via.placeholder.com/100x210" alt="300*210">
<img src="http://via.placeholder.com/100x230" alt="300*230">
<img src="http://via.placeholder.com/100x100" alt="300*100">
<img src="http://via.placeholder.com/100x70" alt="300*70">
<img src="http://via.placeholder.com/100x150" alt="300*150">
<img src="http://via.placeholder.com/100x250" alt="300*250">
<img src="http://via.placeholder.com/100x80" alt="300*80">
<img src="http://via.placeholder.com/100x90" alt="300*90">
<img src="http://via.placeholder.com/100x120" alt="300*120">
<img src="http://via.placeholder.com/100x210" alt="300*210">
<img src="http://via.placeholder.com/100x230" alt="300*230">
</div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script>
var waterfall = {
init: function () {
//图片宽度 包含padding margin content
//outerWidth 获取匹配元素集合中第一个元素的当前计算外部宽度（包括padding，border和可选的margin） 或设置每个匹配元素的外部高度。 true 包含margin
this.imgWidth = $('.waterfall img').outerWidth(true)
//列数
this.colCount = Math.floor($('.waterfall').width() / this.imgWidth)
console.log('列数:' + this.colCount);
//列数初始化
//存储每一列的当前高度
this.colHeightArr = []
//初始化每列高度为0
for (var i = 0; i < this.colCount; i++) {
this.colHeightArr[i] = 0
}
// var width = this.imgWidth * this.colCount
// $('.waterfall').width(width)
},
start: function () {
this.init()
this.bind()
},
bind: function () {
var _this = this
$('.waterfall img').on('load', function () {
_this.layout($(this))
})
$(window).on('resize', function () {
// $('.waterfall').width('auto')
_this.init()
$('.waterfall img').each(function () {
_this.layout($(this))
})
})
},
layout: function ($node) {
var minValue = this.colHeightArr[0] //最小值
var minIndex = 0 //最小值下标
// console.log(this.colHeightArr);
for (var i = 0; i < this.colCount; i++) {
if (this.colHeightArr[i] < minValue) {
minValue = this.colHeightArr[i]
minIndex = i
}
}
// console.log($node);
$node.css({
left: minIndex * this.imgWidth,
top: minValue
})
this.colHeightArr[minIndex] += $node.outerHeight(true) //存储新的高度
//确定最大高度 设置waterfall的高度
var maxHeight = Math.max.apply(null, this.colHeightArr)
$('.waterfall').height(maxHeight)
}
}
$(function () {
waterfall.start()
})
</script>
</body>
</html>
