Question

我正在执行以下操作，在容器内随机定位一组div而不重叠它们：

    .container {
      position: relative;
    }

    .tile {
      width: 16px;
      height: 16px;
      text-align: center;
      background: steelblue;
      margin: 1px;
    }

var tilesize = 18,
  tilecount = 15;
var gRows = Math.floor($(".container").innerWidth() / tilesize);
var gCols = Math.floor($('.container').innerHeight() / tilesize);

var vals = _.shuffle(_.range(tilecount));
var xpos = _.shuffle(_.range(gRows));
var ypos = _.shuffle(_.range(gCols));

_.each(vals, function(d, i) {
  var $newdiv = $('<div/>').addClass("tile");
  $newdiv.css({
    'position': 'absolute',
    'left': (xpos[i] * tilesize) + 'px',
    'top': (ypos[i] * tilesize) + 'px'
  }).appendTo('.container').html(d);
});

如何让div看起来像浮动？因此，只需在各个方向上进行少量平滑运动，使它们看起来像是漂浮在太空中。

每个div需要单独移动并在多个方向上移动（不只是从左到右或向上和向下）。方向几乎需要随机...我希望每个方向看起来像一个漂浮的粒子。

Answer 1

您可以按照以下方式进行动画制作。

var tilesize = 18, tilecount = 15;
var gRows = Math.floor($(".container").innerWidth()/tilesize);
var gCols = Math.floor($('.container').innerHeight()/tilesize);

var vals = _.shuffle(_.range(tilecount));
var xpos = _.shuffle(_.range(gRows));
var ypos = _.shuffle(_.range(gCols));

_.each(vals, function(d,i){
    var $newdiv = $('<div/>').addClass("tile");
    $newdiv.css({
        'position':'absolute',
        'left':(xpos[i] * tilesize)+'px',
        'top':(ypos[i] * tilesize)+'px'
    }).appendTo( '.container' ).html(d); 
    animateDiv();
});



function newPosition(){


    var h = $('.container').height() - 50;
    var w = $('.container').width() - 50;

    var newh = Math.floor(Math.random() * h);
    var neww = Math.floor(Math.random() * w);

    return [newh,neww];    

}

function animateDiv(){
    var newp = newPosition();
    var oldp = $('.tile').offset();
    var speed = 3000;    
    $('.tile').animate({ top: newp[0], left: newp[1] }, speed, function(){
      animateDiv();        
    });

};

<强> Working Fiddle

动画div看起来像是在空间漂浮

1 个答案: