javascript - 使用javascript将数组中的两个图像随机附加到 'li's中

Question

我基本上试图将图像数组随机动态添加到它们自己的 li 元素中，这工作正常，但我现在真正想做的是为每个列表元素附加第二个图像。我不确定这会如何运作。这是我的工作随机化器脚本，它会打乱数组顺序:

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);
}

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

<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。

Answer 1

提前打乱数组，然后任务就会变得更加清晰，但是如果图像数量为奇数，则需要考虑到这一点。

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 (图片损坏)