サイズ変更時の要素の追加と削除

Question

最初に、またウィンドウのサイズを変更したときに、1em（16px）幅の段落要素を追加して削除しようとしています。スクリプトが最初に読み込まれると、たいていの場合2〜6個の段落要素が余りに多くなります。また、ウィンドウのサイズを変更すると、多くのものが追加されたり、多くのものが削除されたりします。差。私はバニラのjavascriptでこれを達成しようとしています。

編集：段落は縦になり、1文字幅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

あなたはいくつかの点で、二行目に落ちる1つの段落があることがわかります - これはまだ修正する必要が何かです。