使用javascript径向排列图像的最有效方法是什么？

我一直在绞尽脑汁想如何使这项工作成功。我找不到这方面的例子，实际上也没有以前的问题。基本上我有121个缩略图像（尺寸完全相同），将它们排列在带有水槽的网格中，我想拍摄第一个图像并将其放置在中心。（这允许使用11x11图像网格）然后我想拍摄下一张图像，并开始使用距离中心图像最近的可用空白位置围绕中心图像排列它们，直到所有图像都用完为止。假设图像列表将从阵列对象中获取。做这件事最有效的方法是什么？

很可能不是解决这件事最有效的方法，但我想用它：

您可以迭代网格中的所有点，计算它们到中心点的距离，然后按此距离对点进行排序。与算法解决方案相比的优势在于，您可以使用各种距离函数：

// Setup constants
var arraySize = 11;
var centerPoint = {x:5, y:5};

// Calculate the Euclidean Distance between two points
function distance(point1, point2) {
    return Math.sqrt(Math.pow(point1.x - point2.x, 2) + Math.pow(point1.y - point2.y, 2));
}

// Create array containing points with distance values
var pointsWithDistances = [];
for (var i=0; i<arraySize; i++) {
    for (var j=0; j<arraySize; j++) {
        var point = {x:i, y:j};
        point.distance = distance(centerPoint, point);
        pointsWithDistances.push(point);
    }
}

// Sort points by distance value
pointsWithDistances.sort(function(point1, point2) {
    return point1.distance == point2.distance ? 0 : point1.distance < point2.distance ? -1 : 1;
});

通过按此顺序迭代数组，可以有效地从中心向外填充网格

（感谢Andreas Carlbom关于如何显示此结构的想法。）

查看使用直线距离的区别：

// Rectilinear Distance between two points
function distance(point1, point2) {
    return Math.abs(point1.x - point2.x) + Math.abs(point1.y - point2.y);
}

对于算法方法的外壳式结构，您可以使用最大度量：

// 'Maximum Metric' Distance between two points
function distance(point1, point2) {
    return Math.max(Math.abs(point1.x - point2.x), Math.abs(point1.y - point2.y));
}

---

您可以在此处使用代码：

这称为“按螺旋顺序填充矩阵”。试着用谷歌搜索一下，有很多解决方案。它甚至可能不相关，但我对你的问题很感兴趣，并拼凑了一个jQuery脚本来实现它——万一有人感兴趣，我就把它留在这里：非常感谢你的贡献Andreas！你回答了这个问题，这正是我所希望的，谢谢！也许有人会向我们展示一种更快的方法，但与此同时，我该如何在每个div之间添加排水沟，因为在您的示例中，位置是通过绝对位置计算的？通过CSS添加边距不会影响div在其周围的位置……是的，jsFiddle代码中的div是绝对定位的，大小tile大小在代码中是固定的。我提取了一个

tileSize

变量并更新了示例，请看一看。感谢您的工作，这使我完全掌握了正确的方向！伟大的建议！是：。如果您不需要平铺来适应任何间隙，您可以删除所有

Math.ceil

/

Math.floor

调用。当您单击齿轮时，我一直在尝试将视口中的中间div（以红色勾勒）居中，但我希望在页面加载时将此div自动居中。第二个问题是当穿过阵列并击中齿轮时。。。由于overscroll的工作方式，它使阵列的另一个区域居中，我想找出一种克服这种情况的方法，因此每次单击齿轮时，它都会将您带到中心分区。这是我的小提琴

// 'Maximum Metric' Distance between two points
function distance(point1, point2) {
    return Math.max(Math.abs(point1.x - point2.x), Math.abs(point1.y - point2.y));
}