課程
/前端開發
/JavaScript
/瀑布流布局
為什么縮小窗口后,再拖動滾動條只顯示兩列,而且恢復窗口大小,還是顯示兩列
2017-02-11
源自:瀑布流布局 2-7
正在回答
童鞋,課程已修訂,代表小伙伴們感謝你一下確實啊 用戶體驗更好啊 怎么會是更差呢
因為這個練習只是部分的代碼,還沒有添加滾動條監測事件,就是這個↓↓↓,這里面放入了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'); ????????}; ????}
Resen4983
你知道怎么解決嗎
因為<div class= 'main'>這個盒子的寬度定義是在window.onload的時候用waterFall()函數時添加進去的,因此當窗口改變,沒有再次觸發window.onload事件,#main的寬度也不會改變。
具體辦法等學到了響應式布局就能解決了。
舉報
瀑布流布局是網站比較流行的一種布局方式,教你實現三大方式
2 回答代碼有個小BUG
3 回答不要問為什么老師代碼那么多錯誤——預埋BUG是用心良苦
2 回答窗口比例縮小時滾動滾動條會有bug
1 回答清除浮動出現bug
2 回答兩個div是不是不太好
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2022-03-27
童鞋,課程已修訂,代表小伙伴們感謝你一下確實啊 用戶體驗更好啊 怎么會是更差呢
2017-03-30
因為這個練習只是部分的代碼,還沒有添加滾動條監測事件,就是這個↓↓↓,這里面放入了waterfall()函數,因此鼠標滾動條位置變化時就會從新計算列數.
2017-02-12
你知道怎么解決嗎
2017-02-12
因為<div class= 'main'>這個盒子的寬度定義是在window.onload的時候用waterFall()函數時添加進去的,因此當窗口改變,沒有再次觸發window.onload事件,#main的寬度也不會改變。
具體辦法等學到了響應式布局就能解決了。