Append two images randomly from array into 'li's with javascript

问题

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>

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.

回答1:

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)

回答2:

I revised your algorithm a bit so that you're not constantly appending items to the DOM (as that lowers performance). I'm adding images to the li and then adding the li to a document fragment. I'm not 100% sure what your goal is but I think this gets you on the right track.

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

来源：https://stackoverflow.com/questions/14552922/append-two-images-randomly-from-array-into-lis-with-javascript