Question

javascript代码，用于通过在mozilla中运行的图像拼贴而不是chrome

$(document).ready(function() {

    var canvaswidth = $('.rc-contentholder').width();
    var canvasheight = $('.rc-contentholder').height();

    function setleftandtop(noofdivision) {

        var elements = document.getElementsByClassName('rc-singlecontentholder');
        var noofelements = elements.length;
        //place the first row
        currentelementid = elements[0].id;
        $("#" + currentelementid).css('left', '0px');
        $("#" + currentelementid).css('top', '0px');

        for (j = 1; j < noofdivision; j++) {

            previousleft = parseFloat(elements[j - 1].style.left);
            top = 0;
            previouswidth = parseFloat(elements[j - 1].style.width);

            elements[j].style.left = (previousleft + previouswidth) + "px";

            elements[j].style.top = 0;

        }
        //place the remaining rows
        for (i = noofdivision; i < noofelements; i++) {
            currentid = elements[i - noofdivision].id;

            left = parseFloat(elements[i - noofdivision].style.left);

            uppertop = parseFloat(elements[i - noofdivision].style.top);
            console.log(uppertop)
            height = $("#" + currentid).height();
            console.log("id" + "=" + currentid + " " + "height" + "=" + ($("#" + currentid).height()));
            elements[i].style.left = left + "px";

            elements[i].style.top = (uppertop + height) + "px";

        }

    }

    if (canvaswidth >= 1200) {
        noofdivision = 5;
        singlecontentholderwidth = canvaswidth / noofdivision;
        $('.rc-singlecontentholder').css('width', singlecontentholderwidth);
        setleftandtop(noofdivision);
    } else if (canvaswidth >= 900) {
        noofdivision = 4;
        singlecontentholderwidth = canvaswidth / noofdivision;
        $('.rc-singlecontentholder').css('width', singlecontentholderwidth);
        setleftandtop(noofdivision);
    } else if (canvaswidth >= 550) {
        noofdivision = 3;
        singlecontentholderwidth = canvaswidth / noofdivision;
        $('.rc-singlecontentholder').css('width', singlecontentholderwidth);
        setleftandtop(noofdivision);
    } else if (canvaswidth >= 480) {
        noofdivision = 2
        singlecontentholderwidth = canvaswidth / noofdivision;
        $('.rc-singlecontentholder').css('width', singlecontentholderwidth);
        setleftandtop(noofdivision);
    } else if (canvaswidth < 480) {
        noofdivision = 1;
        singlecontentholderwidth = canvaswidth / noofdivision;
        $('.rc-singlecontentholder').css('width', singlecontentholderwidth);
        setleftandtop(noofdivision);
    }
});

在chrome中，分区rc-singlecontentholder的高度不断变化，不知道发生了什么，请帮助我。帮助将不胜感激。

Answer 1

根据经验，你应该总是提供一个独立的示例/片段/ jsfiddle，这样其他人就可以很容易地弄清楚你的问题是什么。在您的代码中，缺少标记（HTML），并且未定义您的几个变量。但是，我会尝试从您提供的信息中向您推进正确的方向。

我推断您要确定画布可以从类“rc-containerwidth”的元素中适合的图像数量。我要解决的第一件事是，如果你从

迭代

var j = 0

你可以使用

elements[j]

但这只是一种轻微的审美。

我假设您有一个名为'rc-singlecontentholder'的课程，其中包含实际内容，这会使div具有宽度和高度。考虑到这一点，我在代码中看到的真正问题是，第一个for循环将第一个n =（noofdivision-1）元素设置为类'rc-singlecontentholder'，使top = 0。

第二个for循环从元素编号n = i-noofdivison开始。因为它始于

var i = noofdivison;

这有效地从n = 0开始，这意味着你循环遍历与第一个循环中相同的元素。然后计算变量upperTop作为元素顶部位置，它将为0。

upperTop = top = 0;

最后将此元素的顶部设置为顶部+高度

elements[i].style.top = (upperTop + height) + 'px';

这将导致不同的元素定位在其容器的高度。这将发生在第一个n =（noofdivison-1）元素中，其余元素将根据您对这些元素的原始css的位置进行放置，这很难从您的问题中猜出。这些因素耦合在一起很可能导致chrome的高度与firefox中div的高度不同。希望这可以指出你正确的方向来包扎你的代码。

除此之外，可以对代码进行一些改进，但如果您处于学习JavaScript的阶段，这可能是一个很好的任务。

如果学习JavaScript不重要，那么我建议尝试重用一些已经存在的图像拼贴库，这应该比创建自己的库更健壮，更省时。您可以查看一个名为H5P Collage的替代方案，或查看我们如何使用JavaScript在github进行制作。披露：我是H5P team的开发人员之一。

javascript（从图像制作拼贴）

javascript代码，用于通过在mozilla中运行的图像拼贴而不是chrome

1 个答案: