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

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值，因为它仍然是1 ；
• 在计算difference ，您可能要忽略小数部分并获取一个整数值，否则您将添加或删除多余的段落
• executeOnResize的条件语句应允许您既不必添加段落也不删除任何内容的情况
• 您确定要在difference小于paraAmount时添加段落吗？ 不应该这样吗？

这是我的测试页，请对其进行检查。 希望对您有所帮助。

http://dojo.telerik.com/AVoKU

您会注意到，在某些时候，第二行上有一个段落-这仍然需要修复。