为什么缩小窗口后,再拖动滚动条只显示两列,而且恢复窗口大小,还是显示两列
童鞋,课程已修订,代表小伙伴们感谢你一下确实啊 用户体验更好啊 怎么会是更差呢
因为这个练习只是部分的代码,还没有添加滚动条监测事件,就是这个↓↓↓,这里面放入了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的宽度也不会改变。
具体办法等学到了响应式布局就能解决了。