jQuery：添加和刪除元素，因爲窗口已調整大小，但始終覆蓋窗口

我想爲我的網站創建一個基線網格，該基準網格始終在頁面底部顯示基線。jQuery：添加和刪除元素，因爲窗口已調整大小，但始終覆蓋窗口

我所做的是我創建一個初始基線，通過css進行樣式化。

<figure id="lines"> 
    <div class='base-line bl1'></div> 
</figure>

然後創建新的，直到我到達文檔的底部。

<script type="text/javascript"> 
     $(document).ready(function() { 
      var diff = Math.floor($('body').height()/$('.base-line').height()); 
      for (var i = 1; i <= diff; i++) 
       $('#lines').append("<div class='base-line bl" + i + "'></div>"); 
     }); 
    </script>

但是，當我調整頁面大小（例如降低高度）時，仍有基線遺留。當我動態增加文檔的高度時（例如，用媒體查詢更改某些值），基線不會到達頁面的底部。

是否有可能調整大小處理程序，添加和刪除基準時調整大小？我想如果我在每個調整大小上刪除所有base-line並且爲每個調整大小狀態繪製所有這些大小，那麼它就不是很好。

有關於此的任何想法？

來源

2012-05-09 matt

假設這是創建函數基線

function addBaseLines(){ 
    $('#lines').clear(); 
    var diff = Math.floor($('body').height()/$('.base-line').height()); 
    for (var i = 1; i <= diff; i++){ 
     append("<div class='base-line bl" + i + "'></div>"); 
    } 
}

你能做到這一點

var timeout = null; 

$(window).resize(function(){ 
    if (timeout!=null){ 
     clearTimeout(timeout); 
    } 
    timeout = setTimeout(addBaseLines, 1000); // only do when the user is "done" 

});

見JSFiddle

性能並不可怕，如果你使用的超時...

爲了提高性能，只是刪除了那些淡出人們的視線，但我認爲它不是關鍵

來源

2012-05-09 18:47:42

通過方式，我在Chrome中測試：addBaseLines花了1ms ... –

以及你可以，

$(window).resize(function(){ 
    var height = $(window).height(); /*or width*/ 
    var min = 500; //for example 
    if(height < min){ 
     $('.base-line').hide(); 
    }else{ 
     $('.base-line').show(); 
    } 
});

，但我不知道，如果你想隱藏/顯示或刪除/添加（我會先做）

來源

2012-05-09 18:11:49

jQuery：添加和刪除元素，因爲窗口已調整大小，但始終覆蓋窗口

回答

相關問題