随机化图形类图像

如何在此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>

像这样：

（IMAGE 1）（图像2）（IMAGE 3）

当我刷新页面：（IMAGE 3）（IMAGE 2 ）（图片1）

再次：（图片2）（图片3）（图片1）

我该怎么办？我尝试了很多东西，没有任何东西！我不能单独做它

来源

2017-06-19 Giuseppe

欢迎来到StackOverflow！你到目前为止尝试过什么吗？ StackOverflow不是一个免费的代码写入服务，并期望你[**尝试首先解决你自己的问题**]（http://meta.stackoverflow.com/questions/261592）。请更新您的问题以显示您已经尝试的内容，在[**最小，完整和可验证的示例**]（http://stackoverflow.com/help/mcve）中展示您面临的特定问题。有关详细信息，请参阅[**如何提出良好问题**]（http://stackoverflow.com/help/how-to-ask），并参加[**游览**]（http：//该网站:) –

您是否想要洗牌含有''元素的'

'元素，或者仅仅是图像本身？ – nnnnnn

刷新页面后，仅刷洗图像！ – Giuseppe

你可以尝试创建一个随机排序的图像的新阵列，然后用所述新的图像阵列替换#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)

来源

2017-06-19 04:40:37

我得到了这个代码的问题，顺便说一句，谢谢你的回复。我仍然在使用MixItUp插件，有一种方法可以将其插入到此插件中？我还使用此代码，但仍然没有工作来更新这些图像 @edit：我收到的问题在这里插入代码，所以，在这里你走引擎收录链接：https://pastebin.com/mzFzedEV – Giuseppe

我不熟悉您使用的插件，但在查看其文档后，您需要将'data-order'从'img'元素移到其容器'figure'元素上。你可以删除我提供的以前的代码。 –

随机化图形类图像

回答

相关问题