我怎样才能实现这种随机排列的图像外观？ [关闭]答案

【问题标题】：how can I achieve this randomly arranged images kind look? [closed]我怎样才能实现这种随机排列的图像外观？ [关闭]
【发布时间】：2019-12-28 03:53:53
【问题描述】：

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

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

【问题讨论】：

他们只是使用 css 属性 z-index 来执行此操作，当您将标签悬停时，z-index 属性会增加一。所以图像出现了。
@DaniloScavassa 嗨，我知道 z-index 是如何工作的，我认为这与我询问的效果无关

标签： javascript html css reactjs

【解决方案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>

【讨论】：