使用JavaScript将数组中的两个图像随机添加到"li"中 [英] Append two images randomly from array into 'li's with javascript

问题描述

我基本上是在尝试将图像数组动态地随机添加到它们自己的li元素中，这很好，但是我现在真正想做的是为每个list元素添加第二个图像.我不确定这将如何工作.这是我的随机化器脚本，它可以随机排列数组的顺序:

I am basically trying to dynamically add an Array of images randomly into their own li elements, which is working fine, but what I really want to do now is append a second image per list element. I'm not sure how this would work. Here's my working randomiser script which shuffles the array order:

var imgs = ['img-1.jpg','img-2.jpg','img-3.jpg','img-4.jpg','img-5.jpg','img-6.jpg'];

var i = imgs.length, j, tempi, tempj;
while (i--) {
    j = Math.floor(Math.random() * (i + 1));
    tempi = imgs[i];
    tempj = imgs[j];
    imgs[i] = tempj;
    imgs[j] = tempi;

    var img = imgs[i];
    var folder = 'img/';

    var li = document.createElement('li');
    li.className = 'phototickr';
    document.getElementById('stream').appendChild(li);

    var tickr = document.createElement('img');
    tickr.src = folder + img;
    tickr.alt = '';

    li.appendChild(tickr);
}

我想要的最终标记是这样:

The final markup I want is this:

<ul id="stream">
<li><img src="img-1.jpg"><img src="img-2.jpg"></li>
<li><img src="img-3.jpg"><img src="img-4.jpg"></li>
<li><img src="img-5.jpg"><img src="img-6.jpg"></li>
</ul>

不知道如何解决这个问题，或者是否有一个干净的解决方案，非常感谢您的帮助.不，我不想使用jQuery.

Not sure how to get my head around it, or if there is a clean solution, much appreciated any help. And no, I don't want to use jQuery.

推荐答案

预先对数组进行随机排序，然后任务会变得更加清晰，但是如果图像数量奇数，则需要考虑一下余量.

Shuffle the array in advance and then the task becomes much clearer, but you need to make an allowance for if you have an odd number of images.

var imgs = ['img-1.jpg','img-2.jpg','img-3.jpg','img-4.jpg','img-5.jpg','img-6.jpg'];

function shuffleArray(a) { // Fisher-Yates shuffle
    var i = a.length, t, j;
    while (--i) t = a[i], a[i] = a[j = ~~(Math.random() * (i+1))], a[j] = t;
}
shuffleArray(imgs);

var i = imgs.length, stream, li, img1, img2;
stream = document.getElementById('stream');
while ((i = i - 2) >= 0) {
    // <li>
    li = document.createElement('li');
    li.className = 'phototickr';
    // <img>
    img1 = document.createElement('img');
    img1.src = 'img/' + imgs[i];
    img1.alt = '';
    img2 = document.createElement('img');
    img2.src = 'img/' + imgs[i + 1];
    img2.alt = '';
    // append
    li.appendChild(img1);
    li.appendChild(img2);
    stream.appendChild(li);
}
if (i === -1) { // odd number of images
    // <li>
    li = document.createElement('li');
    li.className = 'phototickr';
    // <img>
    img1 = document.createElement('img');
    img1.src = 'img/' + imgs[0];
    img1.alt = '';
    // append
    li.appendChild(img1);
    stream.appendChild(li);
}

小提琴示例 (带有损坏的图像)

Example fiddle (with broken images)

这篇关于使用JavaScript将数组中的两个图像随机添加到"li"中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！