从数组中随机添加两个图像到'；李'；使用javascript进行编程

我基本上是尝试动态地将一组图像随机添加到它们自己的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。

我稍微修改了您的算法，这样您就不会不断地向DOM追加项（因为这会降低性能）。我将图像添加到li，然后将li添加到文档片段。我不是100%确定你的目标是什么，但我认为这会让你走上正轨

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

function randomize(list){
  var i = list.length, j, tempi, tempj;
  if(i == 0) return false;
  while(--i){
    j = Math.floor(Math.random() * (i + 1));
    tempi = list[i];
    tempj = list[j];
    list[i] = tempj;
    list[j] = tempi;
  }
}

function buildList(){
  var fragment = document.createDocumentFragment();
  var folder   = 'img/';

  randomize(imgs);
  var l = imgs.length;
  while(l > 1){
    var img1 = imgs[--l];
    var img2 = imgs[--l];

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

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

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

    li.appendChild(tickr1);
    li.appendChild(tickr2);
    fragment.appendChild(li);
  }

  document.getElementById('stream').appendChild(fragment);
}

---

我对您的算法做了一些修改，这样您就不会经常向DOM追加项（因为这会降低性能）。我将图像添加到li，然后将li添加到文档片段。我不是100%确定你的目标是什么，但我认为这会让你走上正轨

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

function randomize(list){
  var i = list.length, j, tempi, tempj;
  if(i == 0) return false;
  while(--i){
    j = Math.floor(Math.random() * (i + 1));
    tempi = list[i];
    tempj = list[j];
    list[i] = tempj;
    list[j] = tempi;
  }
}

function buildList(){
  var fragment = document.createDocumentFragment();
  var folder   = 'img/';

  randomize(imgs);
  var l = imgs.length;
  while(l > 1){
    var img1 = imgs[--l];
    var img2 = imgs[--l];

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

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

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

    li.appendChild(tickr1);
    li.appendChild(tickr2);
    fragment.appendChild(li);
  }

  document.getElementById('stream').appendChild(fragment);
}

---

预先洗牌数组，任务就会变得更加清晰，但如果图像数量为奇数，则需要留出空间

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

var-imgs=['img-1.jpg'，'img-2.jpg'，'img-3.jpg'，'img-4.jpg'，'img-5.jpg'，'img-6.jpg']；
函数Shuffarray（a）{//Fisher-Yates shuffle
var i=a.长度，t，j；
而（--i）t=a[i]，a[i]=a[j=~~（Math.random（）*（i+1））]，a[j]=t；
}
沙弗雷；
var i=imgs.长度、流、li、img1、img2；
stream=document.getElementById（'stream'）；
而（（i=i-2）>=0）{
//

li=document.createElement（'li'）；
li.className='phototicker'；
// 
li=document.createElement（'li'）；
li.className='phototicker'；
// 
（对于断开的图像）
提前洗牌数组，任务就会变得更加清晰，但如果图像数量为奇数，则需要留出空间

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

var-imgs=['img-1.jpg'，'img-2.jpg'，'img-3.jpg'，'img-4.jpg'，'img-5.jpg'，'img-6.jpg']；
函数Shuffarray（a）{//Fisher-Yates shuffle
var i=a.长度，t，j；
而（--i）t=a[i]，a[i]=a[j=~~（Math.random（）*（i+1））]，a[j]=t；
}
沙弗雷；
var i=imgs.长度、流、li、img1、img2；
stream=document.getElementById（'stream'）；
而（（i=i-2）>=0）{
//

li=document.createElement（'li'）；
li.className='phototicker'；
// 
li=document.createElement（'li'）；
li.className='phototicker'；
// 
（带有破损图像）
这两个图像都将来自同一个列表吗？还是您将有一个单独的列表可以从中提取？@thechad-我希望指定它们都来自同一个数组，因此如果我有6个图像，它将在3个列表元素中平均分割它们-如果这有意义的话。我知道使用两个图像数组很容易做到。这两个图像都是吗它将来自同一个列表？或者您将有一个单独的列表可以从中提取？@thechad-我希望从同一个数组中指定它们，因此如果我有6个图像，它将在3个列表元素中平均分割它们-如果这有意义的话。我知道使用两个图像数组可以很容易地完成。谢谢，出于某种原因，尽管它没有显示为我提供了y图像。对原因有什么想法吗？我看不出有什么问题。啊，必须调用buildList（）；函数，这就是原因：）非常感谢！谢谢，出于某种原因，尽管它没有为我显示任何图像。对原因有什么想法吗？我看不出有什么问题。啊，必须调用buildList（）；函数，这就是为什么：）非常感谢！您甚至可以使用
while（（i-=2）>=0）
，尽管在这一点上，我会使用一个更可读的
for（int i=0；i
循环（我必须承认，这是一个令人惊讶的就地压缩的Fisher-Yates实现！）谢谢Paul，这看起来真的很好。在你发布这篇文章之前，我接受了上面的答案，所以我很抱歉，但就性能而言，是上面的（还是你的）更好的解决方案，因为它们都工作得非常好，谢谢你花时间来帮助我。@Todd快速看一眼，它们看起来差不多相等，但有两个不同之处；1.Thechad的文档片段将为你节省一些重画，如果你进行数百次迭代，这可能会很重要（因此他的速度很可能会快几纳秒），但2.他并不是从奇数长度的数组中放入所有图像。@MattiasBuelens是的，这些可能更可读。我几天前写过Fisher Yates（因此压缩）我很高兴我终于在回答中使用了它！啊，太棒了，保罗！我刚刚删除了img-6.jpg，你是对的，你的更好，因为它为孤独者形象广告了一个新的列表元素。使用你的Fisher-yates做得很好！哈哈！：）再次感谢，mega感谢。你甚至可以使用
而（（I-=2）>=0）
，虽然在这一点上，我会选择一个更可读的
（inti=0；I
循环。（但我必须承认，这是一个令人惊讶的就地压缩的Fisher-Yates实现！）谢谢Paul，这看起来真的很好。在你发布这篇文章之前，我接受了上面的答案，所以我很抱歉，但就性能而言，是上面的（还是你的）更好的解决方案，因为它们都工作得非常好，谢谢你花时间来帮助我。@Todd快速看一眼，它们看起来差不多相等，但有两个不同之处；1.Thechad的文档片段将为你节省一些重画，如果你进行数百次迭代，这可能会很重要（因此他的速度很可能会快几纳秒），但2.他并不是从奇数长度的数组中输入所有图像。@MattiasBuelens是的，这些图像可能更可读。我几天前写过Fisher Yates（因此压缩），很高兴我终于在回答中使用了它！啊，太棒了，Paul！我刚刚删除了img-6.jpg，然后