关于最后利用什么原理把重叠的分开，以及怎么让后面的元素找到那个矮的元素呢？求详解
慕仙5237505
2017-11-18 16:47
从代码20开始就有些看不明白了，麻烦把每个代码意思帮我理一理，多谢》
问1：一排6个，他是怎么让后面的比如第7个找到最低的图片排列过去的呢？boxs[i]没说具体是哪个啊
问2：他是怎么把重叠的图片分开的呢？harr[index] += oboxs[i].offsetHeight; 这里的【index】不是最小高 = 最小高+某一元素的自身高度 么？那也没有写他的left top 是多少啊，利用社呢原理分开的呢
//获取classname为cls的数组
function getByClass(parent,cls){
var boxArr = new Array(), //存储class为box的元素
oelements = parent.getElementsByTagName("*");
for(var i=0; i<oelements.length; i++){
if(oelements[i].className == cls){
boxArr.push(oelements[i]);
}
}
return boxArr;
}
//获取最小值的索引,如果arr数组中的某一个等于我们传的数字val,返回他索引
function getIndex(arr,val){
for(var i in arr){
if(arr[i]==val){
return i;
}
}
}
2回答
-
- 潇湘魅
- 2017-11-20 15:43:34
hArr[index]+=oBoxs[i].offsetHeight就是hArr[index]=hArr[index]+oBoxs[i].offsetHeight的意思！
另外这是个大循环 for (var i=0;i<oBoxs.length;i++) 遍历每一张图 视频中cols=6(所以hArr数组的长度为6)，当i=5时，hArr数组保存了6张图的高（分别是266，286，160，146，155，147），当i=6时（这是进行第7次循环）执行else后面的代码，取出hArr中最小的值minH=146和索引index=3；然后把图片放在第4张图下面；
如果没有hArr[index]+=oBoxs[i].offsetHeight; 进行 i =7（第8次循环），获得的minH和index和之前是一样的，一直到i=oBoxs.length-1;结束循环 所有图片会放在同一位置！
实际在进行i=7时，第四张图下面已经有一张图了，必然hArr[3]的高度不再是146，而是146加上上一张图的高度
也就是hArr[3]=hArr[3]+oBoxs[6].offsetHeight;
ps：数组下标是从0开始的。
-
- 潇湘魅
- 2017-11-20 14:05:36
答1；16-17行把前6个的高度放入oBoxs【】；然后19行获得高度最小的那一个，20行利用getMinhIndex()得到高度最低那个的索引，最后利用绝对定位21-24行固定下一张的位置；
答2：这个时候我们看见第7张后面所有的图片都重合了，因为oBox数组的值没有改变，导致下一次循环第19行获得的最小高度是相同的，因此我们每排列一张图片就要把它的高度加在对应的数组下面参见第25行！
具体过程：
var hArr=[];
//循环遍历每一张图片
for (var i=0;i<oBoxs.length;i++) {
//下雨cols的图片正常摆放并将高度放如hArr;
if(i<cols){
hArr.push(oBoxs[i].offsetHeight);
}else{
//取出hArr中高度最小的的值，并用minH保存
var minH=Math.min.apply(null,hArr);
//console.log(minH);
//取出高度最小的值在数组hArr中的索引
var index=getMinhIndex(hArr,minH);
//固定下一张图的位置
oBoxs[i].style.position='absolute';
oBoxs[i].style.top=minH+'px';
console.log(oBoxW);
oBoxs[i].style.left=oBoxW*index+'px';
//将添加的图片的值加如对应的hArr数组中；hArr[index]表示数组中最小的那个，oBoxs[i]代表即将刚放入的图片
hArr[index]+=oBoxs[i].offsetHeight;
}
}
}
瀑布流布局
97759 学习 · 736 问题
相似问题