Заказ Jquery img position

Question

Я пытаюсь упорядочить свои изображения на странице как шестиугольник. Я нашел решение для этого на Java, и теперь я пытаюсь реализовать его на Jquery.Сначала я создал элемент div списка фотографий

<div class="photoList">
<?php $categories = find_category();

 foreach($categories as $category): ?>
<div id="userList"> 
 <img id="<?Php echo $category['cat_id']; ?>" src = <?Php echo $category['cat_image']; ?> />
</div>
 <?php endforeach ;?>
</div>

Он получает все источники элементов из базы данных и показывает их сверху вниз.

Затем я использовал Jquery для изменения положения каждого элемента на странице.

$(document).ready(function(){

 var cx = $(window).height()/2;
 var cy=$(window).width()/2;
 var  $userList= $('.userList img').size();

 var polyXX = new Array("30","25","0" ,"-25","-30","-25","0","25");
 var polyYY = new Array("0","22","30" ,"22","0","-22","-30","-22");
 var count =5;

   for ( var i = 1; i < $userList; ++i ) {
 drawHexes(cx,cy); 
   }
 function drawHexes(cx,cy){ 
 count = Math.min ( 20, Math.min ( cx, cy )/20  );


        for ( var rank = 1; rank < count; ++rank ) {

            for ( var bar = 0; bar < 8; ++bar ) {
                var x = ( polyXX [ ( bar + 6 ) % 8 ] + polyXX[ ( bar + 7 ) % 8 ] ) * rank;
                var y= ( polyYY [ ( bar +6 ) % 8 ] + polyYY [ ( bar + 7 ) % 8 ] ) * rank;

                var dx =polyXX [ bar ] + polyXX [ ( bar + 1 ) %8 ];
                var dy = polyYY [ bar ] + polyYY [ ( bar + 1 ) %8 ];


              for ( var hex = 0; hex < rank; ++hex ) {
 $('.userList img').css({'left':(cx+x)+'px' ,'top':(cy+y)+'px'} );

                    x += dx;
                    y += dy;

                }
            }    
  }   
 } 

});

Но это не дает никакого эффекта. Все фотографии имеют одинаковую позицию.Они должны быть похожи на шестиугольник.У меня проблема с этой строкой $('.userList img').css({'left':(cx+x)+'px' ,'top':(cy+y)+'px'} );

А вот пост для создания шестиугольника в Java. создание 10.000 подключенной страницы шестиугольника?

** РЕДАКТИРОВАНИЕ **

Я создал console.bug и в результате cx = 298 cy = 403,3 x = 25 y = NaN dx= 3025 дд = 022

Answer 1

Тестируете ли вы значения (cx+x)+'px' и (cy+y)+'px'?

Вы вводите типовое минное поле с этими утверждениями.

Посмотрите пример: http://jsfiddle.net/ASC5k/

Редактировать

Чтобы убедиться, что вы добавляете два целых числа, используйте parseInt(cx,10). Э.Г.

cx = parseInt(cx,10);

Answer 2

Вы применили position: absolute к своим изображениям? И, кстати, вы пропустили кавычки для src -атрибута в этой строке (исправленная версия):

<img id="<?php echo $category['cat_id']; ?>" src="<?php echo $category['cat_image']; ?>" />