将缩略图附加到 DIV 时，如何以特定模式定位缩略图？

Question

我正在构建一个包含 150 个缩略图的图库，并使用 jQuery 脚本将图像放入 DIV 中并将它们链接到更大的版本：

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

我遇到的问题是定位。每个缩略图的大小为 100 像素 x 150 像素，我想按照以下特定顺序将它们排列为 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 大小为 300 像素 x 450 像素，并且一次仅显示 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

使用 模 运算符

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/