瀑布流
- 原理:
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); 把行放入页面
网友评论