布局方式：瀑布流 & 木桶

瀑布流

• 原理：
  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 sumHeight.push(0) 长度 = 队列数
  } 数值 = 每列所有元素高度总和
  初始值 = 0

2 如何得到最短列？
$('.item').each(function(){
var idx = 0, 1假设最短列下标=0
minSumHeight = sumHeight[0];
for(var i=0;i if(sumHeight[i] 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 = $('

'); 在页面上创建行
$.each(this.rowList, function(idx, imgInfo){
var $imgCt = $('

'), 创建图片容器
$img = $(imgInfo.target); 把此图变成Jq对象，以便操作
$img.height(newRowHeight); 设置此图高度 = 新行高
$imgCt.append($img); 把图片放入容器
$rowCt.append($imgCt); 把容器放入行
});
this.$ct.append($rowCt); 把行放入页面

• 应用：
  木桶布局
  瀑布流布局
  瀑布流news // Math.max.apply(null,arr)// deferred.resolve()// .apply()