随机化图类图像

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)