課程
/前端開發
/JavaScript
/瀑布流布局
瀏覽器先縮小打開網頁，最大化后刷新，會有一部分空白，這個怎么解決？？？
2015-07-30
源自：瀑布流布局 3-2
正在回答
你應該使用了?$(window).on("resize", waterfall); 這句監聽器了窗口大小的變化吧。
試想，你先縮小再放大，就會產生這樣的效果。這是為什么呢？原因是窗口變小后調用了waterfall方法，此時算出來的列數比原先的小，這時原先是處在第一行的圖片現在到了第2行，那么到第2行的話就一定會被添加了 position:absolute屬性。再放大的話，這個盒子又要”回到“第1行，但是它已經被添加了 position:absolute屬性，所以它”回不去“了。因此，需要 在源代碼中加上這么一句：
if(index < cols) { ? ?$(value).removeAttr("style"); //移除style樣式，配合 resize 事件（窗口變化時觸發） ? ?hArr[index] = h;} else {
如果它是處在第1行，那么一定要先移除掉style屬性，不管它有沒有style屬性了。
//按照瀏覽器最大化的寬度，6是經過測試得到var cols = (Math.floor($(window).width()/w)<6)?6:Math.floor($(window).width()/w);
加上這一句可以解決，還有其他方法嗎？？？
舉報
瀑布流布局是網站比較流行的一種布局方式，教你實現三大方式
1 回答瀏覽器變化是執行waterfall（）方法 縮小時可以 放大不行
2 回答當瀏覽器窗口縮小或者放大時，列數仍會隨之改變
1 回答屏幕縮小 放大的問題
2 回答這個有bug啊，把瀏覽器窗口縮小時滾動式正常的，但是放大后就會有重疊現象出現了，怎么解決呢
1 回答為什么在Firefox瀏覽器下會有一塊區域重疊，其他瀏覽器都沒有問題
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-02-04
你應該使用了?$(window).on("resize", waterfall); 這句監聽器了窗口大小的變化吧。
試想，你先縮小再放大，就會產生這樣的效果。這是為什么呢？原因是窗口變小后調用了waterfall方法，此時算出來的列數比原先的小，這時原先是處在第一行的圖片現在到了第2行，那么到第2行的話就一定會被添加了 position:absolute屬性。再放大的話，這個盒子又要”回到“第1行，但是它已經被添加了 position:absolute屬性，所以它”回不去“了。因此，需要 在源代碼中加上這么一句：
if(index < cols) {
? ?$(value).removeAttr("style"); //移除style樣式，配合 resize 事件（窗口變化時觸發）
? ?hArr[index] = h;
} else {
如果它是處在第1行，那么一定要先移除掉style屬性，不管它有沒有style屬性了。
2015-07-30
//按照瀏覽器最大化的寬度，6是經過測試得到
var cols = (Math.floor($(window).width()/w)<6)?6:Math.floor($(window).width()/w);
加上這一句可以解決，還有其他方法嗎？？？