0

私は基本的に、画像の配列を独自の li 要素にランダムに動的に追加しようとしていますが、これは正常に機能していますが、今本当にやりたいことは、リスト要素ごとに 2 番目の画像を追加することです。これがどのように機能するかわかりません。配列の順序をシャッフルする私の作業用ランダマイザースクリプトは次のとおりです。

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 に答える