축소판 이미지를 DIV에 추가 할 때 어떻게 특정 패턴으로 축소판 이미지를 배치 할 수 있습니까?

Question

나는 150 개 썸네일 이미지의 갤러리를 짓고 있어요 그리고 난 DIV에 이미지를 배치하고 더 큰 버전에 연결하기 위해 jQuery를 스크립트를 사용하고 있습니다 :

function getImageThumb(number) { 
return $('<a href="javascript:void(0);" title="Plate ' + number + '" rel="{gallery: \'gal1\', smallimage: \'./Vol4/Small/tafel_' + number + '.jpg\', largeimage: \'./Vol4/Large/tafel_' + number + '.jpg\'}">' + 
     '<img src="./Vol4/Thumbs/tafel_' + number + '.jpg" alt="Plate ' + number + '" width="100" height="150" border="0" /></a>');} 

$(document).ready(function(){ 
    for (var i=450; i<601; i++) { 
    $(".pane").append(getImageThumb(i)); 
    } 
}); 

나는 데 문제 위치에있다 . 각각의 축소판 x 150 픽셀 100 픽셀이며, 나는이 특정 순서로 9 그룹으로 배열 할 :

01 02 03 10 11 12 19 20 21 
04 05 06 13 14 15 22 23 24 
07 08 09 16 17 18 25 26 27 

아이디어는 완성 된 DIV가 450 픽셀로 300 픽셀 수와 9 개 이미지의 단일 블록에서 보여 것입니다 시간. 사용자는 왼쪽 또는 오른쪽으로 스크롤하여 9 개의 축소판 그룹을 볼 수 있습니다. 나는 그 크기와 DIV를 작성하고 스크립트를 실행할 때, 그냥 바닥에 넘쳐 나는 이런 식으로 배열 된 세 개의 열 및 50 개 행을 얻을 :

01 02 03 
04 05 06 
07 08 09 
10 11 12 
13 14 15 and so forth 

사람이 나에게로 이미지를 배치하는 간단한 방법을 보여줄 수 올바른 패턴을 DIV에 추가할까요?

Answer 1

당신은 같은 것을 할 수있는 modulus 운영자

var paneCount = 1; 
for (var i=450; i<601; i++) { 
    if (i % 9 == 0) 
     paneCount ++; 
    $(".pane"+paneCount).append(getImageThumb(i)); 
} 

Answer 2

을 사용

http://jsfiddle.net/gKkW4/