如何将缩略图图像附加到 DIV 时以特定模式定位它们

How can I position thumbnail images in a particular pattern as I append them to a DIV?

本文关键字：模式 定位 DIV 略图 图像      更新时间：2023-09-26

我正在构建一个包含 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)); 
    }
});

我遇到的问题是定位。 每个缩略图都是 100px x 150px，我想按以下特定顺序将它们排列成 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将是300px x 450px，一次只显示9个图像的单个块。 用户可以向左或向右滚动以查看不同的 9 个缩略图组。 但是当我使用这些维度创建 DIV 并运行脚本时，它只是溢出底部，我得到三列和 50 行，排列方式如下：

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

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

使用模运算符


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

你可以做这样的事情：

http://jsfiddle.net/gKkW4/

相关文章：