图像的随机位置 [英] random position of images

问题描述

我找到了一个可以随机定位div / images的脚本。然而，它并没有完全按照我想要/需要它的方式工作。

i found a script that would position divs / images randomly. However, it isn't completely working the way i want/need it to.

图像在div中加载（我觉得这不是理想的）。我有大约30张图片。

The images are loaded each within a div (which isn't ideal i guess). I have around 30 images.

但它们加载不好而且 var posy =（Math.random（）*（$（document） .height（） - 0））。toFixed（）; 也不能很好地工作。图像大部分都加载到顶部（我认为博客中的图像不计算，所以它得到没有图像的高度？）

But they don't load nicely and var posy = (Math.random() * ($(document).height() - 0)).toFixed(); doesn't work nicely either. The images mostly load on top (i think that the images in the blog don't count so it gets the height without images?)

所以我想要的：加载更好地随机化它们以便它们也到达页面底部

So what I want: Load the in more nicely Randomize them so they get to the bottom of the page, too

var circlePosition = document.getElementsByClassName('circle');
console.log(circlePosition);

function position() {
  for (var i = 0; i < circlePosition.length; i++ ) {
    //give circle a random position
    var posx = (Math.random() * ($(document).width() - 0)).toFixed();
    var posy = (Math.random() * ($(document).height() - 0)).toFixed();



    //apply position to circle
    $(circlePosition[i]).css({
      'position':'absolute',
      'left':posx+'px',
      'top':posy+'px',
    })
  } 
} //end function position

var circleTotal = circlePosition.length;

$('.circle').click(function() {
  $(this).fadeOut();
  circleTotal = circleTotal - 1;
  console.log(circleTotal);

  if(circleTotal == 0) {
    position()
    $('.circle').fadeIn();
  }

});

position();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="//placehold.it/1x5000"> <!-- Placeholder image to show issue -->
<div class="circle">
  <img src="http://static.tumblr.com/tensqk8/k8anq0438/01.png">
</div>
<div class="circle">
  <img src="http://static.tumblr.com/tensqk8/k8anq0438/01.png">
</div>

推荐答案

一个干净，可读且没有jQuery依赖的解决方案可能是这样的。它通过定位图像本身避免不必要地将图像包装在div中。它包含一个隐藏元素作为一种穷人 shadow DOM 。

A clean and readable and solution without a jQuery dependence might be something like this. It avoids unnecessarily wrapping your images in divs by positioning the images themselves. It includes a hidden element as a sort of "poor man's" shadow DOM.

http://jsfiddle.net/sean9999 / yv9otwr7 / 9 /

;(function(window,document,undefined){
    "use strict";
        var init = function(){    
            var canvas = document.querySelector('#x');
            var icon_template = document.querySelector('#template');
            var icon_width = 40;
            var icon_height = 30;
            var the_images = [
                'http://static.tumblr.com/tensqk8/k8anq0438/01.png',
                'http://static.tumblr.com/tensqk8/rYanq05el/04.png',
                'http://static.tumblr.com/tensqk8/SYknq05py/05.png',
                'http://static.tumblr.com/tensqk8/s7inq057d/03.png'
            ];
            var pickRandomImage = function(){
                var i = Math.floor( Math.random() * the_images.length );
                return the_images[i];
            };
            var total_number_of_images = 10;
            var max_height = canvas.offsetHeight - icon_height;
            var max_width = canvas.offsetWidth - icon_width;
            var randomCoordinate = function(){
                var r = [];
                var x = Math.floor( Math.random() * max_width );
                var y = Math.floor( Math.random() * max_height );
                r = [x,y];
                return r;
            };
            var createImage = function(){
                var node = icon_template.cloneNode(true);
                var xy = randomCoordinate();
                node.removeAttribute('id');
                node.removeAttribute('hidden');
                node.style.top = xy[1] + 'px';
                node.style.left = xy[0] + 'px';
                node.setAttribute('src',pickRandomImage());
                canvas.appendChild(node);
            };
            for (var i=0;i<total_number_of_images;i++){
                createImage();
            };
        };
       window.addEventListener('load',init);
})(window,document);

body {
    background-color: #fed;
}

#x {
    border: 3px solid gray;
    background-color: white;
    height: 400px;
    position: relative;
}

#x .icon {
    position: absolute;
    z-index: 2;
}

<h1>Randomly distributed images</h1>

<div id="x"></div>

<img src="#" class="icon" hidden="hidden" id="template" />

这篇关于图像的随机位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！