我怎样才能实现这种随机排列的图像外观?

Question

我 https://pepecph.com/看到这个页面，并认为图片随机显示在屏幕上的效果非常酷。

我想知道有什么方法可以达到这种效果。我们是否应该使用 css 网格划分屏幕并分配一些网格项作为图像元素？我不擅长 css，我希望有人能给我一些例子来证明这是可能的。

Answer 1

一种方法可能是生成用于定位图像的随机数。您可以应用以下 CSS 来确定位置：

position:absolute; top: x px; left: y px;

从Javascript生成x并使用随机数生成器进行y。然后将每个图像放置在div容器中并应用 CSS。

下面是在页面中随机放置图像的示例代码。可以添加逻辑以确保图像不重叠。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="main"></div>
<script>
images = ['airplane.png', 'boat.png', 'fruits.png', 'tulips.png', 'pool.png']
$(document).ready(() => {
images.forEach((image, index) => {
var img = $('<img width="100px" height="100px" id="img-' + index + '" src="https://homepages.cae.wisc.edu/~ece533/images/' + image + '">');
img.attr('style', 'position:absolute;top:' + getRandomNumber() + 'px;left:' + getRandomNumber() + 'px');
img.appendTo('#main');
});
function getRandomNumber() {
return Math.ceil(Math.random() * 600);
}
});
</script>