老师请问一下
来源：4-3 追加样式优化
远小远
2019-01-10 23:48:25
//设置追加盒子的样式函数
var getStartNumber=0;
function setStyle(box,top,left,index){
if(getStartNumber>=index){
return false;
};
box.css({
'position':'absolute',
'top':top,
'left':left,
'opacity':'0'
}).stop().animate({
'opacity':'1'
},1000);
getStartNumber=index;
};
//封装追加盒子函数
function appendBox(wrap){
for(i in data){
var innerString='<div><img src="images/'+ data[i].src +'"><a href="http://www.imooc.com" target="_blank">' +data[i].title+ '</a></div>';
wrap.append(innerString);
};
waterfall(wrap,wrap.children('div'));
};
老师这段代码不是很理解，能不能请老师逐句分析一下，特别是函数传参，循环，还有定义Index值得一些操作不是很理解
1回答
-
你好同学 , 这块代码主要是为盒子设置一个样式 , 利用盒子的索引index与getStartNumber去判断是否要追加样式 . 当getStartNumber等于盒子的索引的时候 ,说明页面上的盒子都添加过样式了 .此时没有新的盒子需要追加 , 就直接return , 如果在页面滚动过程中 , 因为index的值是一直在增加的 , 此时getStartNumber肯定会小于index , 那么这个时候就要追加样式了
函数定义的的参数 ,在函数调用的时候会传入实参 , 可以查看一下源码 ,如下在调用上面的函数时 , 传入了实参 :
如下代码在之前的问答中也有讲解过 ,这里老师就不多说了 . 主要给同学解释一下 ,函数调用 ,
函数调用就是函数名+() ,然后括号里面传入的就是实参 , 参数之间用逗号隔开 , 实参与函数定义的形参按照位置一一对应 ,所以函数setStyle中的形参index对应的就是这里的i .
而如下功能主要是追加盒子 :
这里的循环的data , 而data就是定义的一个数组 , 里面保存着我们使用到的图片信息 :
所以上面的其实就是遍历了一个数组 ,数组每一项元素都保存着一个对象 , 然后使用data[i].src这样的方式获取每一项数据 , 并动态绑定 ,然后添加到页面 . 如果同学不太理解循环的语法 , 建议复习一下之前的课程 . 以巩固for循环方便的知识 .
通过这两天的答疑 , 感觉同学对瀑布流还不是很理解 . 所以老师建议同学 ,先不要一句一句的去扣代码 . 在整体思路不清除的情况下 , 这样学习效率不是很高 . 这一块确实比较难理解 . 还是要多看几遍视频 , 先把整体的思路理顺 . 然后跟着老师去敲代码 , 把这个思路的流程都弄明白了 . 再去分析代码 , 就会清晰很多了 .
祝学习愉快 ,望采纳 .
2
相似问题