页面刷新时的随机图像显示顺序

Question

我是Javascript新手——每次刷新页面时，我都会尝试以不同的顺序重新加载页面上的图像——这样每次访问都会有一个新的网站安排。

类似于这里所做的：pauljung.co.uk

这里使用的函数是MathRandom，它可以调整图像的大小，并在加载时将图像放置在不同的位置。但是，我想知道如何准确地将图像调用到页面的HTML主体上？

我尝试在主体中放置一个间隔gif，并将其链接到id=picture的JS，但是这不会一次加载所有图像。

<img src="images/spacer.gif" id="Picture" alt="some image">

$(document).ready(function () {

    $('#picture > img').each(function () {

        var randomXs = ["0px", "5%", "10%"];
        var randomX2s = ["0px", "0px", "0px", "5%"];
        var randomYs = ["200px", "50px", "100px", "150px", "250px", "300px"];
        var randomY2s = ["0px", "5%"];
        var widths = ["35%", "30%", "20%", "20%", "20%", "40%"];

        if ($(window).width() > 1024) {
            var randomXs = ["0px", "5%", "10%", "15%", "30%", "20%"];
            var randomX2s = ["0px", "0px", "0px", "5%"];
            var randomYs = ["200px", "50px", "-100px", "100px", "150px", "250px", "300px"];
            var randomY2s = ["0px", "5%"];
            var widths = ["20%", "30%", "20%", "15%", "20%", "25%", "20%"];
        }

        if ($(window).width() > 1600) {
            var randomXs = ["0px", "5%", "10%", "15%", "30%", "20%"];
            var randomX2s = ["0px", "5%"];
            var randomYs = ["200px", "50px", "-100px", "100px", "150px", "250px", "300px"];
            var randomX2s = ["0px", "0px", "0px", "0px", "5%"];
            var widths = ["35%", "30%", "22%", "20%", "18%", "17%", "23%", "10%", "12%", "15%", "15%", "11%", "13%"];
        }

        var randomX = randomXs[Math.floor(Math.random() * randomXs.length)];
        var randomX2 = randomX2s[Math.floor(Math.random() * randomX2s.length)];
        var randomY = randomYs[Math.floor(Math.random() * randomYs.length)];
        var randomY2 = randomY2s[Math.floor(Math.random() * randomY2s.length)];
        var width = widths[Math.floor(Math.random() * widths.length)];

        $(this).css('width', width);
        $(this).css('margin-right', randomX2);
        $(this).css('margin-left', randomX);
        $(this).css('margin-bottom', randomY);
        $(this).css('margin-top', randomY2);
    });

});

Answer 1

现代浏览器对元素执行区分大小写的搜索

因此HTML ID是区分大小写的。

在这种情况下，id“Picture”应更改为“Picture”。

<img src="images/spacer.gif" id="picture" alt="some image">

我希望这能有所帮助。