布局方式:瀑布流 & 木桶

瀑布流

  • 原理:
    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); 把行放入页面

推荐阅读更多精彩内容

  • 《ijs》速成开发手册3.0 官方用户交流:iApp开发交流(1) 239547050iApp开发交流(2) 10...
    叶染柒丶阅读 4,137评论 0 7
  • 什么是瀑布流,说话不形象,直接看图说话 ![S55M%73LKAKO@]OZ7D@MH.png](http://u...
    GarenWang阅读 816评论 0 4
  • 人生就像一列开往坟墓的列车,路途上会有很多站,很难有人至始至终陪你走完全程,当陪你的人要下车时,即便不舍,也要心存...
    sunny519111阅读 849评论 0 0
  • 所谓瀑布流,就是图片分几列有规律的排列,但是这里的排列是有要求的,普通的浮动布局会使图片与图片之间有很多的空隙,这...
    小飞侠zzr阅读 700评论 0 0
  • 25. 必须要冲破一些东西,人才可以回到自我之中。自我并不是天成的,而是创造而成的一个精神体。如果人不能意识到自我...
    Nihao123阅读 111评论 0 0