I am trying to order my images on page like an hexagon.I found solution for this on java and now I am trying to implement it on Jquery. Firstly I crated my photo list div element 

```
<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>

```

It gets all element source from database and show them on page top to bottom .

Then I used Jquery for changing each element position on page 

```
$(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;

                }
            }    
  }   
 } 

});

```

But this is not doing any effect.All photos are the same position. They must be like an hexagon. I thing I have problem with this line `$('.userList img').css({'left':(cx+x)+'px' ,'top':(cy+y)+'px'} );` 

And here post for creating hexagon in Java. [creating 10.000 connected hexagon page?](https://stackoverflow.com/questions/3687176/creating-10-000-connected-hexagon-page)

\*\*EDIT \*\*

I made console.bug and as result 
cx=298 
cy=403.3
 x=25
 y=NaN 
dx=3025
 dy=022