0

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

4

2 回答 2

2

提前打乱数组，然后任务变得更加清晰，但是如果你有奇数个图像，你需要留出余地。

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

小提琴示例（带有损坏的图像）

于 2013-01-27T22:47:52.580 回答
1

我稍微修改了您的算法，这样您就不会不断地将项目附加到 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);
}
于 2013-01-27T22:38:14.567 回答