boxes的值为何会自动追加

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);
      }
   });
};