javascript - Trying to keep the random placement of my folders within the window. At the moment it seems to overflow on the x and y axis

Question

Welcome To Ask or Share your Answers For Others

javascript - Trying to keep the random placement of my folders within the window. At the moment it seems to overflow on the x and y axis

posted Oct 6, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - Trying to keep the random placement of my folders within the window. At the moment it seems to overflow on the x and y axis

I am trying to keep the random placement of my folders within the window. At the moment it seems to overflow on the x-axis and y-axis. Are you able to help? I'm sure this is a simple fix.

The goal is to have the set of folders randomly placed on the screen, but never be placed outside of the screen height and width.

<style>
        /* Background Color */
            body {
                background-color: lightcoral;
            }
        /* Div position and placement */
            div {
                position: absolute;
                top: 100px;
                left: 100px;
            }
        </style>
        
        <body>
            <div class="container">
                <div><img src="/images/folder.png" width="100px" /></div>
                <div><img src="/images/folder.png" width="100px" /></div>
                <div><img src="/images/folder.png" width="100px" /></div>
                <div><img src="/images/folder.png" width="100px" /></div>
                <div><img src="/images/folder.png" width="100px" /></div>
                <div><img src="/images/folder.png" width="100px" /></div>
                <div><img src="/images/folder.png" width="100px" /></div>
            </div>
        </body>
        <script>
            // collect all the div folders
            var folderDivs = document.getElementsByTagName("div");
            // get window width and height
            var winWidth = window.innerWidth;
            var winHeight = window.innerHeight;
        
            // i stands for "index". you could also call this banana or haircut. it's a variable
            for (var i = 0; i < folderDivs.length; i++) {
    
                // shortcut! the current div in the list
                var thisDiv = folderDivs[i];
        
                // get random numbers for each element
                randomTop = getRandomNumber(0, winHeight);
                randomLeft = getRandomNumber(0, winWidth);
        
                // update top and left position
                thisDiv.style.top = randomTop + "px";
                thisDiv.style.left = randomLeft + "px";
            }
        
            // function that return a random number between a min and max
            function getRandomNumber(min, max) {
                return Math.random() * (max - min) + min;
            }
        </script>

question from:https://stackoverflow.com/questions/66050187/trying-to-keep-the-random-placement-of-my-folders-within-the-window-at-the-mome

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-06T03:16:02+0000

Do not use getElementsByTagName("div") because this applies also to

div class="container"

Instead use

var folderDivs = document.querySelectorAll(".container div");

Subtract image size from allowed place

In your style part you have set top and left position to each div. This rule applies to container div too.

Notice: Your images are in div with class "container" but this div is positioned 100px left and 100px top. So all your images have 100px left and top offset.

200 = 100 (for image size) + 100 (for container offset)

var imgSizeWithOffset = 200;
// get random numbers for each element
randomTop = getRandomNumber(0, winHeight-imgSizeWithOffset);
randomLeft = getRandomNumber(0, winWidth-imgSizeWithOffset);

If you decide you don't need this container offset you can set your style like this and use 100

<style>
    /* Background Color */
    body {
        background-color: lightcoral;
    }
    /* Div position and placement */
    .container div {
        position: absolute;
    }
</style>

Categories

javascript - Trying to keep the random placement of my folders within the window. At the moment it seems to overflow on the x and y axis

javascript - Trying to keep the random placement of my folders within the window. At the moment it seems to overflow on the x and y axis

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags