在调整大小时添加和删除元素

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

你会发现，在某些点上，有一个段落落在第二行 - 这是一件仍然需要加以固定。