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中创建六边形的帖子。 creating 10.000 connected hexagon page?

**编辑**

我制作了console.bug，结果 CX = 298 CY = 403.3 X = 25 Y = NaN的 DX = 3025 dy = 022

Answer 1

您是否在测试(cx+x)+'px'和(cy+y)+'px'的价值？

您正在使用这些声明进入类型转换雷区。

查看示例：http://jsfiddle.net/ASC5k/

修改

要确保添加两个整数，请使用parseInt(cx,10)。 E.g。

cx = parseInt(cx,10);

Answer 2

您是否将position: absolute应用于图片？顺便说一下，你错过了这一行中src - 属性的引号（更正后的版本）：

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

Jquery订购img的位置

2 个答案: