在調整大小時添加和刪除元素

Question

我試圖在最初和當窗口調整大小時添加和刪除1em（16px）寬的段落元素。當腳本第一次加載時，它會在大多數情況下添加大約2到6個段落元素，當我調整窗口大小時，它會添加太多或刪除到很多，我不確定是什麼導致它超過或低於區別。我試圖用香草javascript來完成這個。

編輯：段落是爲了垂直，單個字符寬16px。然後，我會隨機產生不斷產生並落在屏幕上的字符。

(function(window, undefined){ 
    var parentContainer = document.getElementsByClassName('stringFall_Container'), 
    paras = document.getElementsByClassName('para'), 
    containerWidth, 
    paraWidth, 
    difference, 
    paraAmount; 

    function checkContainerWidth() { 
     console.log('Running checkContainerWidth();') 
     containerWidth = parentContainer[0].offsetWidth; 
     console.log('The containers size is:' + containerWidth) 
     return true; 
    } 

    function checkParaWidth() { 
     console.log('Running checkParaWidth();') 
     paraWidth = paras[0].offsetWidth; 
     console.log('The Paragraphs size is:' + paraWidth) 
     return true; 
    } 

    function checkParaAmount() { 
     console.log('Running checkParaAmount();'); 
     paraAmount = paras.length; 
     console.log(paraAmount); 
     return true; 
    } 

    function checkDifference() { 
     console.log('Running checkDifference();'); 
     difference = containerWidth/paraWidth; 
     return true; 
    } 

    function addPara (number) { 
     console.log('Running addPara();'); 
     number = number === undefined ? 1 : number; 
     console.log(number); 
     for (var i = 0; i < number; i++) { 
      var create = document.createElement('p'); 
      parentContainer[0].appendChild(create).setAttribute('class', 'para'); 
     } 
     return true; 
    } 

    function removePara (number) { 
     console.log('Running removePara()'); 
     var lastElement = paras[paras.length - 1]; 
     checkParaAmount(); 
     number = number === undefined ? 1 : number; 
     for (var i = 0; i < number; i++) { 
      parentContainer[0].removeChild(lastElement); 
     } 
     return true; 
    } 

    function executeOnResize() { 
     checkDifference(); 
     console.log('Running executeOnResize();'); 
     checkContainerWidth(); 
     if (difference < paraAmount) { 
      addPara(paraAmount - difference); 
     } else { 
      removePara(difference - paraAmount) 
     } 
    } 

    addPara(); 
    checkContainerWidth(); 
    checkParaWidth(); 
    checkParaAmount(); 
    checkDifference(); 
    console.log(difference); 
    addPara(difference); 

    window.addEventListener('resize', executeOnResize, false); 
})(this); 

Answer 1

在這種情況下，強烈建議發佈一個完整的例子，因爲它重要的是什麼樣式應用到段落和它們的容器。一個例子也可以幫助人們更快，更容易地理解你想要做什麼。

裏有算法，標準調試應揭露一些問題：

• 初始添加段落應該考慮到，你已經有一個渲染：addPara(difference - 1);
• 中添加或刪除的段落前executeOnResize，您應該更新paraAmountValue的值，因爲它仍然是;
• 計算difference的時候，你可能要忽略小數部分，並獲得一個整數值，否則就會添加或刪除多個段落超過必要
• 在executeOnResize條件語句應該允許當你既沒有增加的情況下，段落，也不刪除任何
• 確定要加段落何時difference小於paraAmount？難道不是相反嗎？

這是我的測試頁，請檢查它。我希望它能幫助你繼續下去。

http://dojo.telerik.com/AVoKU

你會發現，在某些點上，有一個段落落在第二行 - 這是一件仍然需要加以固定。