Blondinka,
вам ненужно что-либо делать с классом картинок $(".block"+currentCell). вы их прячите тем самым внутри .pazzlePartHolder -- рандомизировать надо как раз этот класс.(над кодом можно ещё работать)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body{
background-color: #eee;
}
.pazzlePartHolder{
width: 50px;
height: 50px;
overflow: hidden;
position: absolute;
}
.topOfTheRow{
float: left;
display: inline-block;
display: inline;
}
#pazzleHolder{
margin-left: 25%;
border: 2px solid black;
width: 600px;
height: 600px;
}
</style>
<title>Pazzle</title>
</head>
<body>
<input type="button" value="start new game" onclick ="location.reload();" />
<input type="button" value="display random element position" onclick ="putPazzleInRandomXYCoordinats()" />
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script>$(document).ready(function(){
//Переменную cellSize не менять!!! Не присваивать ей ноль.
var cellSize = 50, //Размер ячейки.
imgSize = 500, //Размер изображения.
rowAmountConst = imgSize/cellSize, //Количество колонок. Будет задано одинаковое количество колонок и рядов.
rowAmount = 0,//Количество колонок для счётчика, чтоб не менять основную переменную.
currentRow = 0,//Текущий ряд.
cellAmount = rowAmountConst*10, //Общее количество ячеек.
horizontalIndent = 0,//Горизонтальный отступ.
verticalIndent = 0;//Вертикальный отступ.
//$(".pazzlePartHolder").css({"width":cellSize+"px", "height":cellSize+"px"});//Функция работает некорректно.
$("body").append("<div id='pazzleHolder'>");//Открыть div, содержащий весь пазл.
for(var currentCell=0; currentCell<cellAmount; currentCell++){//Пока, текущая ячейка меньше общего количества ячеек.
$("div#pazzleHolder").append("<div id="+currentCell+" class='pazzlePartHolder draggable'></div>");//Добавить блок, содержащий часть пазла.
$("div#"+currentCell).append("<img src='http://mangal.biz/test/04_05_backup_v2/wallpaper.jpg' class='"+"block"+currentCell+"' alt='img' />");//В этот блок добавить img и присвоить уникальный класс "block"+i+.
if(currentCell==0){//Если отображается первая ячейка, то задать ей нулевое смещение вверх.
$(".block"+currentCell).css({'position': 'relative','top' : 0+"px",'left' : 0+"px", 'padding':'0px'});
}else if(currentCell==cellAmount)break;//Если цикл добрался до последней ячейки - завершить итерации.
if(currentCell==rowAmount){
rowAmount+=rowAmountConst;//Если текущая ячейка равна концу ряда, то увеличить её на количество ячеек в ряду. Чтоб можно было сравнивать с крайними числами (например: 3, 6, 9, 12, 16).
horizontalIndent=horizontalIndent-cellSize;//Сдвинуть координаты отступа (смещения) left.
verticalIndent = 0;//...и top. Сдвинуть координаты в начало следующего столбца.
$(currentCell).addClass("topOfTheRow");//Присвоить класс текущему элементу, благодаря чему, в стилях можно будет задать display: inline-block;, для данного класса.
}
$(".block"+currentCell).css({'position': 'relative','top' : verticalIndent+"px",'left' : horizontalIndent+"px"});//Присвоить текущему элементу уникальную позицию.
// $(".block"+currentCell).offset({ top: getYPositionOfElement(), left: getXPositionOfElement() });
verticalIndent = verticalIndent-cellSize;
}
//$("body").append("</div>");
for(var currentCell=0; currentCell<cellAmount; currentCell++){
// $(".block"+currentCell).offset({ top: getYPositionOfElement(), left: getXPositionOfElement() });
}
$(".pazzlePartHolder").each(function(indx, element){
$(this).css({top: getYPositionOfElement(), left: getXPositionOfElement()})
});
$( ".draggable" ).draggable();
});
function getXPositionOfElement() {//Получить случайные координаты x окна браузера.
var x_position = Math.floor(Math.random() * $(window).width());
return x_position;
}
function getYPositionOfElement() {//Получить случайные координаты y окна браузера.
var y_position = Math.floor(Math.random() * $(window).height());
return y_position;
}
</script>
</body>
</html>