瀑布流
- 原理：
1 每个元素的width相等，height不等；就像瀑布，水柱大小一样，长短各异。
2 所有元素用position：absolute定位，通过设置left & top来摆放；
3 每次摆放在最短的一列
- 核心：
1 列从哪里来的？
var nodeWidth = $('.item').outerWidth(true), 1得到元素宽度
colNum = Math.floor( $(window).width()/nodeWidth ), 2窗口宽度/元素宽度= 队列数
sumHeight = []; 3新建空数组
for(var i =0;i<colNum;i++){ 4遍历队列，填入数组：
sumHeight.push(0) 长度 = 队列数
} 数值 = 每列所有元素高度总和
初始值 = 0
2 如何得到最短列？
$('.item').each(function(){
var idx = 0, 1假设最短列下标=0
minSumHeight = sumHeight[0];
for(var i=0;i<sumHeight.length;i++){ 2遍历数组，得到最小数i
if(sumHeight[i]<minSumHeight){
idx = i; 3赋值给最短列
minSumHeight = sumHeight[i]
} 最短列 = 最小数
}
})
3 如何放入最短列？
$(this).css({ 通过position定位，设置：
'left':idxnodeWidth, left = 元素宽度最短列索引
'top':minSumHeight top = 最短列高度
});
重新计算最短列的值 ： 把当前元素高度计入最短列
sumHeight[idx] += $(this).outerHeight(true);
- 问题
1 窗口变动，宽度更改怎么办？
$(window).on('resize',function(){ 添加resize事件
render(); 执行上述render过程
})
2 如何封装？
var water = ({ function render(){ 1把匿名函数赋给water
...... 2将上述render过程变成闭包
return{ 3留下接口
init:render
}
})()
water.init() 4调用water，执行render
木桶
原理：
每个元素的height相等，width不等；
就像木桶，每行高度近似，宽度完全相等；*2
行内所有木块的高度完全相等，宽度不等。*1过程：
1 获得图片：拿到资源（一些图片地址）
2 加载图片：使几张图片先成为同一高度（确保图片不会变形） *1 首次缩放
2 预先摆放：从左到右，直到摆不下（根据宽度确定本行图片数量）
3 正式摆放：把本行的几张图片放满此行（保证每行宽度一致） *2 再次缩放核心：
两次缩放
1 首次缩放：如何等比缩放图片？（以预设高为基准）
计算图片宽高比 ratio = img.width / img.height
高度设为基础行高 img.height = baseHeight
得到图片基础宽度 img.width = baseHeightratio
2 再次缩放：确定此行图片数量之后，如何撑满？（以容器宽为基准）
把这几张高度一致的图片所组成的行（row）整体缩放，使其宽度 = 行宽 ， 得到新行高
newRowHeight = clientWidth rowheight/rowWidth;-
问题：
1 如何判断这张图片是否摆不下？
this.rowList.push(imgInfo); 放入图片
for(var i=0; i< this.rowList.length; i++){ 每加入一张图片
rowWidth = rowWidth + this.rowList[i].width; 重新计算这一行多张图片总宽度
}
if(rowWidth > clientWidth){ 如果图片总宽度大于容器宽度
this.rowList.pop(); 说明放不下，要拿出来！！this.layout(newRowHeight); 得到图片，放入此行 this.rowList = []; 清空木板，开始摆放下行 this.rowList.push(imgInfo); 把刚才放不下的图片摆进来 }
2 如何把图片放入此行？
console.log('createRow');
var $rowCt = $('<div class="img-row"></div>'); 在页面上创建行
$.each(this.rowList, function(idx, imgInfo){
var $imgCt = $('<div class="img-box"></div>'), 创建图片容器
$img = $(imgInfo.target); 把此图变成Jq对象，以便操作
$img.height(newRowHeight); 设置此图高度 = 新行高
$imgCt.append($img); 把图片放入容器
$rowCt.append($imgCt); 把容器放入行
});
this.$ct.append($rowCt); 把行放入页面
