boxes的值为何会自动追加
来源：5-2 作业题
qq_天陨_0
2018-01-18 13:23:53
var a=0;
window.onload = function() {
//获得外层以及每一个盒子
var container = document.getElementById('wrap');
var boxes = container.getElementsByTagName('div');
//运行瀑布流主函数
waterfall(container, boxes);
console.log(++a);
//模拟数据
var data = [{
"src": "1.png",
"title": "第一怪 竹筒当烟袋"
}, {
"src": "2.png",
"title": "第二怪 草帽当锅盖"
}];
//设置滚动加载
window.onscroll = function() {
//校验数据请求
if (getCheck()) {
//var wrap = container;
for (i in data) {
//创建figure
var figure = document.createElement('div');
container.appendChild(figure);
//创建img
var img = document.createElement('img');
img.src = 'images/' + data[i].src;
//img.style.height = 'auto';
figure.appendChild(img);
//创建a标记
var a = document.createElement('a');
a.href = "http://www.imooc.com";
a.target = "_blank";
a.innerHTML = data[i].title;
figure.appendChild(a);
};
console.log(boxes.length);
waterfall(container, boxes);
};
};
};
滚动追加元素后，boxes的值为什么也会自动追加呢？
jQuery
window.onload=function(){
var warp=$('#container'),
box=warp.children('div');
waterfall(warp,box);
var data = [{
"src": "1.png",
"title": "第一怪 竹筒当烟袋"
}, {
"src": "2.png",
"title": "第二怪 草帽当锅盖"
}];
//追加图片
$(document).scroll(function(){
if($(this).scrollTop()+$(window).height()>=$(this).height()){
for(var i=0;i<data.length;i++){
warp.append('<div><a href="#"><img src="img/'+data[i].src+'" alt=""><span>'+data[i].title+'</span></a></div>');
}
box=warp.children('div');//有什么办法可以像js一样省掉这一步
waterfall(warp,box);
}
});
};
5回答
-
var boxes = container.getElementsByTagName('div');”获取到的是个数组对象，可以按照你的第二种方式理解的
0h018-01-18 -
海纳百川_
2018-01-19
每种方式都有它的益处和弊端，用jQuery方式的话，必须要重新获取一下div元素。
0h018-01-19 -
海纳百川_
2018-01-19
你粘贴的这些代码乱乱的，你是想省略哪一步呀
0h018-01-19 -
海纳百川_
2018-01-19
就把里面用到的一些方法，获取元素的方式呀，宽度高度的获取什么的，换成jquery的方式就行了。总体的写法还是和原生的一样的，只是使用jquery会将代码简化些。
0h018-01-19 -
怎么都被占用了呢
2018-01-18
因为这一步呀
container.appendChild(figure);
滚动的时候，如果符合追加的条件，就创建div，然后添加到container盒子内，boxes是container中所有的子div，数量肯定是在增加的呀
0h018-01-18
相似问题