随机化图形类图像

Question

如何在此html

代码上随机/随机播放图像？

<div id="projects" class="clearfix">
<!-- ENSAIO PESSOAL -->
<figure class="mix portfolio-item pessoal">
    <img class="img-responsive" src="img/portfolio/EnsaioPessoal/1_preview.jpg" data-order="1" alt="Galeria">
    <a href="img/portfolio/EnsaioPessoal/1.jpg" title="Foto de ensaio pessoal" rel="portfolio" class="fancybox">
        <span class="plus"></span>
    </a>
    <figcaption class="mask">
        <h3>Ensaio pessoal</h3>
        <span>Algum comentário</span>
    </figcaption>
</figure>
<!-- ENSAIO PESSOAL -->
<figure class="mix portfolio-item pessoal">
    <img class="img-responsive" src="img/portfolio/EnsaioPessoal/1_preview.jpg" data-order="1" alt="Galeria">
    <a href="img/portfolio/EnsaioPessoal/1.jpg" title="Foto de ensaio pessoal" rel="portfolio" class="fancybox">
        <span class="plus"></span>
    </a>
    <figcaption class="mask">
        <h3>Ensaio pessoal</h3>
        <span>Algum comentário</span>
    </figcaption>
</figure>
<!-- ENSAIO PESSOAL -->
<figure class="mix portfolio-item pessoal">
    <img class="img-responsive" src="img/portfolio/EnsaioPessoal/2_preview.jpg" data-order="2" alt="Galeria">
    <a href="img/portfolio/EnsaioPessoal/2.jpg" title="Foto de ensaio pessoal" rel="portfolio" class="fancybox">
        <span class="plus"></span>
    </a>
    <figcaption class="mask">
        <h3>Ensaio pessoal</h3>
        <span>Algum comentário</span>
    </figcaption>
</figure>
<!-- ENSAIO PESSOAL -->
<figure class="mix portfolio-item pessoal">
    <img class="img-responsive" src="img/portfolio/EnsaioPessoal/3_preview.jpg" data-order="3" alt="Galeria">
    <a href="img/portfolio/EnsaioPessoal/3.jpg" title="Foto de ensaio pessoal" rel="portfolio" class="fancybox">
        <span class="plus"></span>
    </a>
    <figcaption class="mask">
        <h3>Ensaio pessoal</h3>
        <span>Algum comentário</span>
    </figcaption>
</figure>
</div>

喜欢这个：

(图1( (图2( (图3(

当我刷新页面时：(图3((图2((图1(

再：(图2((图3((图1(

我该怎么做？我尝试了很多东西，但没有！我一个人做不到

Answer 1

您可以

尝试使用随机排序创建一个新的图像数组，然后将#projects容器旧html替换为所述新图像数组。

//Get references to the container, images, and number of images
let $container = $("#projects")
let $images = $(".mix.portfolio-item.pessoal")
let numImages =$images.length
//Create a new array of images by randomly assigning indexes from 0--numImages
//and replacing the containers html with this new array
let newOrderOfImages = []
$images.each((index, img) => {
    let newIndex = Math.floor(Math.random() * numImages)
    //Keep creating random indexes until an empty one is found
    while(newOrderOfImages[newIndex] !== undefined) {
        newIndex = Math.floor(Math.random() * numImages)
    }
    newOrderOfImages[newIndex] = img
})
$container.html(newOrderOfImages)