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