var minH = Math.min.apply(null,colH);这句求给解释下
0
悬赏园豆：5
[已解决问题]
解决于 2016-04-02 21:46
<!Doctype>
<html>
<head>
<title>瀑布流布局</title>
<meta charset="utf-8" />
<style>
*{
margin: 0;
padding: 0;
}
#main{
padding: 15px 0 0 15px;
}
.box{
padding:10px 0 0 15px;
float: left;
}
.pic{
padding: 10px;
box-shadow: 0 0 6px #ccc;
border: 1px solid #ccc;
border-radius: 5px;
}
.pic img{
width: 150px;
height: auto;
}
</style>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="main">
<div class="box">
<div class="pic">
<img src="images/0.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/1.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/2.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/3.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/4.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/5.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/6.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/7.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/8.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/9.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/10.jpg" />
</div>
</div>
</div>
</body>
</html>
<script type=”text/javascript”>
window.onload=function(){
waterfall('main','box');
}
function waterfall(parent,box){
var oParent=document.getElementById(parent);
// 获取父元素，并赋值给oParent
var oBoxs=getByClass(oParent,box);
// 定义getByClass并赋值给oBoxs,注意这里加了s，从oParent里获取box
var oBoxW = oBoxs[i].offsetWidth;
// 这里获取的是盛放图片盒子的宽度
var cols = Math.floor(document.documentElement.clientWidth/oBoxW);
// 计算几列
var colH = new Array();
// 声明并定义一个新数组，用来盛放列高
for(var i=0;i<oBoxs.length;i++){
if(i<cols){
colH.push(oBoxs[i].offsetHeight);// 将图片的高度值添加到数组中
}else{
// 求最小值和最小值的索引
var minH = Math.min.apply(null,colH);
// 这一句不太懂啊，获取最小列高放在minH中，谁嫩给解释一下这句，apply这里看不懂了，百度的资料也看的稀里糊涂的
var index = getMinhIndex(colH,minH);
// 获得最小列高的索引
// 计算及定义图片出现的位置
oBoxs[i].style.position='absolute';
oBoxs[i].style.top = minH + 'px';
oBoxs[i].style.left = oBoxs[index].offsetLeft + 'px';
// 改变数组值
colH[index] = minH + oBoxs[index].offsetHeight;
}
}
function getByClass(parent,clsName){
var boxArr=new Array(),
oElements=parent.getElementsByTagName('*');
for(var i=0;i<oElements.length;i++){
if(oElements[i].className==clsName){
boxArr.push(oElements[i]);
}
}
return boxArr;
}
// 求最小值在数组中的索引,
// arr接收的是数组，val接收的是判断的值
function getMinhIndex(arr,val){
for(var i in arr){
// i是什么？
if(arr[i] == val)
return i;
}
}
</script>
最佳答案
0
apply() 的作用是改变执行的执行环境。
就是说数组 colH 没有min这个方法，但是Math对象可以求最小值，有min这个方法
例如 var a = Math.min(3,2,1,4)，那么a将赋值为1
colH想使用Math对象的min方法，就需要使用call/apply来改变执行环境了。
Math.min(3,2,1,4)等价于 Math.min.apply(null, [3,2,1,4])，null是上下文，传入的对象对应函数中的this，min函数并没有使用this，因此这里可以为null，[3,2,1,4]是给min函数的参数列表。
var A = { a: 1 } A.add = function( b ){ console.log(this.a + b); // 这里的this是A } A.add(3); // => 4 var B = { a: 4 } A.add.apply(B,[3]); // => 7， add函数中的this 换成了B
收获园豆：5
懂了，真是感谢！经常看到你帮我回答问题~
还有你这有背景的代码是怎么弄出来的啊？
@nostic: 不客气呢，这个代码高亮就是编辑栏右上角HTML 左边的图标，就是插入代码，点这里添加的代码就能高亮显示了～，前端学习到后面确实是比较油难度的，加油！
