Target specific class + numbers

I'm trying to get images of different sizes to appear randomly one by one around the center of the page, for now I managed to have them randomly appear and to have them with different width and therefor height. However I am SURE I can target all of the classes instead of copying every single code with a different name? I remember once seeing a function that targeted a class and automatically the number that followed it, like .item +(and then the extension?)

Any tips regarding letting them appear around the center instead of spread across are welcome. I patched this together with a lot of different codes, so it's bit of a Frankenstein.

$(".grid-item").hide().each(function(i) {
  $(this).delay(i*500).fadeIn(500);
});

var pane_width = $(".random-pane").width() - $(".grid-item").width();
var pane_height = $(".random-pane").height() - $(".grid-item").height();

$(".random-pane").children().each( function(){

  var x = Math.round(Math.random() * pane_width);
  var y =  Math.round(Math.random() * pane_height);

  $(this).css("top",y);
  $(this).css("left",x);

});

var rand=Math.floor(Math.random()*30)+10;
var width=Math.round(($(window).width()/100)*rand);
$('.item-1').width(width);

var rand=Math.floor(Math.random()*30)+10;
var width=Math.round(($(window).width()/100)*rand);
$('.item-2').width(width);

var rand=Math.floor(Math.random()*30)+10;
var width=Math.round(($(window).width()/100)*rand);
$('.item-3').width(width);

var rand=Math.floor(Math.random()*30)+10;
var width=Math.round(($(window).width()/100)*rand);
$('.item-4').width(width);

var rand=Math.floor(Math.random()*30)+10;
var width=Math.round(($(window).width()/100)*rand);
$('.item-5').width(width);