jquery排序img的位置

我想在頁面上訂購我的圖像像一個hexagon.I在java上找到了這個解決方案，現在我試圖在jquery上實現它。首先，我裝箱我的照片列表div元素jquery排序img的位置

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

       } 
      }  
    } 
} 

});

頁面上的每個元素的位置，但，這是沒有做任何effect.All照片是同一位置。它們必須像六角形。我的事情我有這條線的問題$('.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

來源

2010-09-13 Ercan

您是否將position: absolute應用於您的圖片？順便說一句，你錯過了src -attribute的報價在此行中（更正版本）：

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

來源

2010-09-13 09:24:43 jwueller

是在我的main.css中我申請的職位：絕對。 – Ercan 2010-09-13 09:34:55

你測試的(cx+x)+'px'和(cy+y)+'px'值是多少？

你正在進入一個類型警戒雷區，並帶有這些語句。

退房的例子：http://jsfiddle.net/ASC5k/

編輯

爲了確保您要添加兩個整數，使用parseInt(cx,10)。例如。

cx = parseInt(cx,10);

來源

2010-09-13 09:33:13

我該如何補充？ – Ercan 2010-09-13 10:13:32

@Meko。不完全確定你的問題。看到編輯，這可能有助於 – 2010-09-13 10:26:25

它的工作，但現在我所有的圖像移動相同的方向。是否有任何方法選擇每個img分開，並添加他們獨特的左側和頂部位置？ – Ercan 2010-09-13 10:40:27

jquery排序img的位置

回答

相關問題