javascript - 如何为“动画响应图像网格”随机化图像(How to Randomize Images for “Animated Responsive Image Grid”)

Question

"Animated Responsive Image Grid" (from tympanus.net/codrops) displays images only in a sequential order, and in the image grid, it changes from either one image up to any number of images that are configured to change at at a time.

(“动画响应图像网格”（来自tympanus.net/codrops）仅按顺序显示图像，并且在图像网格中，它从一个图像更改为任意数量的图像，这些图像被配置为一次更改。)

I have it set to change 3 random images at a time.

(我将其设置为一次更改3张随机图像。)

I've tried using "var index = Math.floor(Math.random() * imgs.length);"

(我尝试使用“ var index = Math.floor（Math.random（）* imgs.length）;”)

etc, but I can't get it to work.

(等等，但我无法正常工作。)

How can it be made to load images in a random order?

(如何使图像以随机顺序加载？)

<div>                                                                           
   <ul>                    
      <li><a href="#"><img src="images/medium/1.jpg"/></a></li>
      <li><a href="#"><img src="images/medium/2.jpg"/></a></li>
      <li><a href="#"><img src="images/medium/3.jpg"/></a></li>
      <li><a href="#"><img src="images/medium/4.jpg"/></a></li>
   </ul>
</div>

  ask by JeremyT translate from so

Answer 1

By this you can randomize your image orders, javascript need to be involved in this task.

(这样，您可以随机分配图像顺序，此任务需要使用JavaScript。)

First I get the main element of the HTML, get all the children in array to random it, at the end give you the result:

(首先，我得到了HTML的主要元素，将数组中的所有子元素都随机化了，最后得到了结果：)

 var numbers = document.querySelector('#numbers'); var list = Array.from(numbers.children); var newlist; list.sort(function(a, b) { return -1 + Math.random() * 3; // -1, 0, or 1 }); while (numbers.children.length > 0) { numbers.removeChild(numbers.children[0]); } list.forEach(function(el) { numbers.appendChild(el); }); 

 <ul id="numbers"> <li><a href="#"><img src="images/medium/1.jpg"/>1</a></li> <li><a href="#"><img src="images/medium/2.jpg"/>2</a></li> <li><a href="#"><img src="images/medium/3.jpg"/>3</a></li> <li><a href="#"><img src="images/medium/4.jpg"/>4</a></li> </ul> 

Note: something it gives you the same result, but most of the time randomize it, as we know we're not using AI to not give us the old result.

(注意：有些东西可以为您提供相同的结果，但是大多数时候都会将它随机化，因为我们知道我们不是在使用AI来提供旧的结果。)