创建图像云

Question

我想创建一个图像云，其中图像相互堆叠，并根据图像被看到的次数调整大小。

云也可能占用一个预定义的空间。是否可以使用 javascript 或者我需要使用 SVG/Canvas？

类似的东西：hitlantis

任何指针/引用都会很好。

Answer 1

一些东西给你看：

• javascript Image Resize - 您可能需要移动元素以使其看起来正确，但这可以在 CSS 中完成
• CSS Transitions
• jQuery mouseenter 和 mouseleave
• css :hover

如果您使用 :hover 和正确的过渡/样式，甚至可能不需要 Javascript。

编辑：

对于分层，请使用z-index。我不确定你想如何定位你的元素，所以想出一个算法来放置它们（随机可能会很好）。完成后，只需使用position: absolute，将top 和right 设置为您生成的位置。

可能的放置算法：

• 随机（简单易懂：x = Math.random() * maxWidth - radius + centerX），与 y 类似
• Fibonacci-based using Vogel's model- 确保轻松分发
• 聚类相似图像 - 这有点困难，取决于您的聚类逻辑

我确定还有其他人。我建议做一个简单的（随机的），让一切正常，然后如果你愿意，稍后再创建一个更有趣的算法。