課程
/前端開發(fā)
/JavaScript
/瀑布流布局
老師的代碼，改變窗口大小時(shí)還是會(huì)出現(xiàn)問題，該怎么解決
2016-05-27
源自：瀑布流布局 2-5
正在回答
定義好main盒子的寬度再調(diào)整就不會(huì)出現(xiàn)問題了
momoyy123 提問者
源碼里用clientWidth來定義列數(shù)，又用列數(shù)定義main的寬，改變窗口大小后觸發(fā)滾動(dòng)事件時(shí)，clientWidth會(huì)發(fā)生變化，所以列數(shù)會(huì)發(fā)生變化。如果是縮小，那么原來在第一行的部分浮動(dòng)元素會(huì)被擠到下面，變成絕對(duì)定位，頁面重排，沒有問題；但是放大的話，列數(shù)num變大，原來在第二列的元素是絕對(duì)定位，不會(huì)回到第一排，所以部分i<num的aPin[i]仍在第二排，而在waterfall函數(shù)的for循環(huán)中，會(huì)把i<num的aPin[i]當(dāng)成第一排進(jìn)行排版，導(dǎo)致頁面出現(xiàn)錯(cuò)誤?？梢栽趂or循環(huán)面前加一個(gè)循環(huán)，把i<num的aPin[i]的絕對(duì)定位樣式去掉，就不會(huì)有這個(gè)問題了。
淺淺媽
舉報(bào)
瀑布流布局是網(wǎng)站比較流行的一種布局方式，教你實(shí)現(xiàn)三大方式
3 回答窗口改變大小問題
2 回答當(dāng)瀏覽器窗口縮小或者放大時(shí)，列數(shù)仍會(huì)隨之改變
2 回答這個(gè)有bug啊，把瀏覽器窗口縮小時(shí)滾動(dòng)式正常的，但是放大后就會(huì)有重疊現(xiàn)象出現(xiàn)了，怎么解決呢
3 回答如果改變?yōu)g覽器窗口，再渲染顯示會(huì)有問題，變更瀏覽器窗口時(shí)，所有圖片是怎么再次渲染的呢？效率是否會(huì)很低？
2 回答關(guān)于改變頁面大小后，列數(shù)改變問題
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2016-05-28
定義好main盒子的寬度再調(diào)整就不會(huì)出現(xiàn)問題了
2016-06-09
源碼里用clientWidth來定義列數(shù)，又用列數(shù)定義main的寬，改變窗口大小后觸發(fā)滾動(dòng)事件時(shí)，clientWidth會(huì)發(fā)生變化，所以列數(shù)會(huì)發(fā)生變化。如果是縮小，那么原來在第一行的部分浮動(dòng)元素會(huì)被擠到下面，變成絕對(duì)定位，頁面重排，沒有問題；但是放大的話，列數(shù)num變大，原來在第二列的元素是絕對(duì)定位，不會(huì)回到第一排，所以部分i<num的aPin[i]仍在第二排，而在waterfall函數(shù)的for循環(huán)中，會(huì)把i<num的aPin[i]當(dāng)成第一排進(jìn)行排版，導(dǎo)致頁面出現(xiàn)錯(cuò)誤?？梢栽趂or循環(huán)面前加一個(gè)循環(huán)，把i<num的aPin[i]的絕對(duì)定位樣式去掉，就不會(huì)有這個(gè)問題了。