美文网首页
布局方式:瀑布流 & 木桶

布局方式:瀑布流 & 木桶

作者: jrg_memo | 来源:发表于2017-02-13 14:30 被阅读72次

瀑布流

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

相关文章

  • 布局方式:瀑布流 & 木桶

    瀑布流 原理:1 每个元素的width相等,height不等;就像瀑布,水柱大小一样,长短各异。2 所有元素用po...

  • 瀑布流、木桶布局

    瀑布流 瀑布流效果代码 木桶布局 木桶布局效果(加载有点慢)代码

  • 瀑布流布局 的学习

    1- 实现瀑布流布局效果 瀑布流效果瀑布流代码木桶布局效果木桶布局代码瀑布流布局 2- 实现一个新闻瀑布流新闻...

  • 瀑布流布局_木桶布局

    题目1: 实现一个瀑布流布局效果 瀑布流 题目2:实现木桶布局效果 木桶布局 题目3:**实现一个新闻瀑布流新闻网...

  • 瀑布流布局

    题目1: 实现一个瀑布流布局效果瀑布流代码题目2:实现木桶布局效果木桶布局代码题目3:实现一个新闻瀑布流新闻网站,...

  • 瀑布流、木桶布局

    1: 实现一个瀑布流布局效果 demo 2 : 根据视频实现一个新闻瀑布流新闻网站,查看效果457jsonp 接口...

  • 瀑布流布局_木桶布局

    1.实现一个瀑布流布局效果 JQ 瀑布流-1 效果 2.实现木桶布局效果 JQ 木桶布局 效果 3.实现一个新闻瀑...

  • 瀑布流布局&木桶布局

    一、实现一个瀑布流布局效果。 二、实现木桶布局效果。 预览 三、实现一个新闻瀑布流新闻网站。查看效果 jsonp ...

  • 瀑布流与木桶布局

    瀑布流布局 demohttp://js.jirengu.com/zobocukone/1/edit?html,js...

  • jQuery 瀑布流+木桶布局

    题目1: 实现一个瀑布流布局效果 演示 题目2:实现木桶布局效果 演示 题目3:实现一个新闻瀑布流新闻网站 jso...

网友评论

      本文标题:布局方式:瀑布流 & 木桶

      本文链接:https://www.haomeiwen.com/subject/hzmwittx.html