每张图片的宽度固定，高度不固定，在加载的过程中，我们可以按需求对图片进行布局，比如计算好要有排布几列，按每列图片高度总和最小的列先摆放图片
实现原理：
- 写好图片的样式，display: absolute;
- 计算出总共有多少列图片（colCount）
- 定义一个数组，用于存放每一列的高度（每列中图片的高度总和），并且初始化数组（每项为0）
- 图片到来之后，判断出高度最小的列 获得其高度（colSumHeight），并且得到其数组下标（minIdx），通过这两个值，设置 css 放置图片的位置
test-1
var colCount //总共有多少列
var colHeightArray = [] //定义一个数组，存储列的高度（即，这一列图片高度的总和）
var imgWidth = $('.waterfall img').outerWidth(true) //获取图片的宽度
colCount = Math.floor($('.waterfall').width() / imgWidth) //计算总共有几列
console.log(colCount)
for (var i = 0; i < colCount; i++){ //初始化数组
colHeightArray[i] = 0
}
console.log(colHeightArray) //比如说有三列，则数组为 [0, 0, 0]
$('.waterfall img').on('load', function(){ //哪个图片先加载完成，先执行
var minValue = colHeightArray[0] //初始化最小高度，为数组的第一个值
var minIndex = 0 //初始化高度最小的列，数组下标为 0
for (var i = 0; i < colCount; i++){
if ( colHeightArray[i] < minValue){
minValue = colHeightArray[i] //通过一个 for 循环，if 判断得出最小高度
minIndex = i //得到高度最小的列，数组下标
}
}
$(this).css({ //css 设置该图片的位置
left: minIndex * imgWidth,
top: minValue
})
colHeightArray[minIndex] += $(this).outerHeight(true) //把每列图片高度的总高度存入数组
})
布局用 绝对定位（position: absolute）
算法：列高度最小的优先排列
http://js.jirengu.com/jineh/1/edit?js,output
$(window).on('resize', function(){ //窗口变化后，执行
colCount = Math.floor($('.waterfall').width() / imgWidth) //重新计算列的数目
for (var i = 0; i < colCount; i++){ //重新初始化数组
colHeightArray[i] = 0
}
$('.waterfall img').each(function(){ //这时候 img 都已经加载好了，直接遍历就可以了，然后把刚才的代码再执行一遍就可以了
var minValue = colHeightArray[0]
var minIndex = 0
for (var i = 0; i < colCount; i++){
if ( colHeightArray[i] < minValue){
minValue = colHeightArray[i]
minIndex = i
}
}
$(this).css({
left: minIndex * imgWidth,
top: minValue
})
colHeightArray[minIndex] += $(this).outerHeight(true)
})
})
加入这个事件后，窗口大小变化后，重新布局瀑布流
http://js.jirengu.com/jineh/4/edit?js,output
var waterfall = {
init: function(){
this.colHeightArray = []
this.imgWidth = $('.waterfall img').outerWidth(true)
this.colCount = Math.floor($('.waterfall').width() / this.imgWidth)
for (var i=0; i < this.colCount; i++){
this.colHeightArray[i] = 0
}
this.bind()
},
bind: function(){
var _this = this
$('.waterfall img').on('load', function(){
_this.layout($(this))
})
$(window).on('resize', function(){
$('.waterfall img').each(function(){
_this.layout($(this))
})
})
},
layout: function($node){
console.log(this)
var minValue = this.colHeightArray[0]
var minIndex = 0
console.log(minValue, minIndex)
for (var i=0; i < this.colCount; i++){
if(this.colHeightArray[i] < minValue){
minValue = this.colHeightArray[i]
minIndex = i
}
}
console.log(minValue, minIndex)
$node.css({
left: minIndex * this.imgWidth,
top: minValue
})
this.colHeightArray[minIndex] += $node.outerHeight(true)
}
}
waterfall.init()
让代码更具可读性
http://js.jirengu.com/jineh/5/edit?js,output
