童鞋，课程已修订，代表小伙伴们感谢你一下确实啊  用户体验更好啊   怎么会是更差呢 

因为这个练习只是部分的代码,还没有添加滚动条监测事件,就是这个↓↓↓,这里面放入了waterfall()函数,因此鼠标滚动条位置变化时就会从新计算列数.

window.onscroll=function(){
        if(checkscrollside()){
            var oParent = document.getElementById('main');// 父级对象
            for(var i=0;i<dataInt.data.length;i++){
                var oPin=document.createElement('div'); //添加 元素节点
                oPin.className='pin';                   //添加 类名 name属性
                oParent.appendChild(oPin);              //添加 子节点
                var oBox=document.createElement('div');
                oBox.className='box';
                oPin.appendChild(oBox);
                var oImg=document.createElement('img');
                oImg.src='./images/'+dataInt.data[i].src;
                oBox.appendChild(oImg);
            }
            waterfall('main','pin');
        };
    }

你知道怎么解决吗

因为<div class= 'main'>这个盒子的宽度定义是在window.onload的时候用waterFall()函数时添加进去的，因此当窗口改变，没有再次触发window.onload事件，#main的宽度也不会改变。

具体办法等学到了响应式布局就能解决了。