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

【问题标题】：How can I position thumbnail images in a particular pattern as I append them to a DIV?当我将缩略图附加到 DIV 时，如何以特定模式定位缩略图？
【发布时间】：2011-05-07 19:46:37
【问题描述】：

我正在构建一个包含 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 并运行脚本时，它只是溢出了底部，我得到了 3 列和 50 行，如下所示：

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

在我将图像附加到 DIV 时，谁能告诉我一种将图像定位到正确模式的简单方法？

【问题讨论】：

标签： javascript jquery css image-manipulation image-gallery

【解决方案1】：

使用modulus 运算符


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

【讨论】：

太棒了！那是我解决问题所需要的。感谢您的帮助。

【解决方案2】：

你可以这样做：

http://jsfiddle.net/gKkW4/

【讨论】：