Question

我想在每个元素中添加一个随机生成的margin-left和margin-top值，但是在一个范围内。

在-50px和0px之间以及50px。每次刷新时都会创建不同的交错和重叠外观

<div class="thumbnail" style="margin-top:55px; margin-left: -20px;">
<p>content</p>
</div>

<div class="thumbnail" style="margin-top:-20px; margin-left: 40px; ">
<p>content</p>
</div>

<div class="thumbnail" style="margin-top:70px; margin-left: 2px;">
<p>content</p>
</div>

任何建议都会很棒。

Answer 1

你可以这样做：

function randomMargin(){
    var randomnumber1=Math.floor(Math.random()*101) - 50;
    var randomnumber2=Math.floor(Math.random()*101) - 50;
    $('.thumbnail').css({"margin-top": randomnumber1+"px", "margin-left": randomnumber2+"px"});
}

setInterval(randomMargin, 1000);

在此处http://jsfiddle.net/dnxFn/1/

编辑多个对象和邪恶的效果：

function randomMargin(){
    $('.thumbnail').each(function(){
        randomizeObject(this);

    });

}

function randomizeObject(el){
    var randomnumber1=Math.floor(Math.random()*101) - 50;
    var randomnumber2=Math.floor(Math.random()*101) - 50;
    $(el).css({"margin-top": randomnumber1+"px", "margin-left": randomnumber2+"px"});
}

setInterval(randomMargin, 1000);

在这里摆弄http://jsfiddle.net/dnxFn/2/

EDIT -2这个是迄今为止最好看的http://jsfiddle.net/dnxFn/4/

Answer 2

试试这个：

$('.thumbnail').each(function() {
  $(this).css({ 
    'margin-top':  Math.floor(Math.random() * 100 - 50) + 'px', 
    'margin-left': Math.floor(Math.random() * 100 - 50) + 'px' });
});

HERE 是代码。

这将为类margin-top的每个元素设置margin-left和thumbnail个样式。 Math.random()返回的值为[0,1]，因此计算出的数字将在[-50,50]范围内。

编辑： Nicola Peluchetti 正在使用Math.floor(Math.random() * 101) - 50，这将生成[-50,50]范围内的数字（因此它也可以生成+ 50px的保证金）。使用:)。

向元素添加随机边距

2 个答案: