Javascriptで画像のランダム表示

Question

全部で20枚の画像を、
画面サイズ1600以上では横に8つ×2列の16枚（※1）、
画面サイズ1600以下では横に6つ×2列の12枚（※2）を並べようと、以下のように記述しました。
（知識が浅いので、もっと良い書き方があると思いますがご了承ください）

※1（1600以上）
■■■■■■■■
■■■■■■■■

※2（1600以下）
■■■■■■
■■■■■■

無事ランダムで並べることに成功しましたが、
画面サイズを横に引き延ばすと、ランダムですので画像がチカチカと入れ替わり、いくつかの画像の場所に「undefined」という文字が出力されてしまいます。

i < 16（あるいはi < 12）としてしまったため、読み込まれなかった画像が画面サイズを伸ばしたことにより出現してしまったのかと思い、
全ての画像を読み込もうとしてi < 16（あるいはi < 12）の部分をarr.lengthにしてしまうと、20枚全部が読み込まれてリストの形が崩れてしまいます。

「undefined」という文字を出さないため、全ての画像を読み込んだ上でリストを崩さずに表示するには、どのように記述したらよいでしょうか。
（cssでoverflowをhiddenにするとかではなく、Javascriptで解決したいです）

勉強ですので、この場所をこんな風にしたら、というヒントだけでも良いので教えていただけたら嬉しいです。
よろしくお願いいたします。

<ul id="photo">
<li><img src="../assets/img/photo001.jpg" alt=""></li>
<li><img src="../assets/img/photo002.jpg" alt=""></li>
<li><img src="../assets/img/photo003.jpg" alt=""></li>
<li><img src="../assets/img/photo004.jpg" alt=""></li>
<li><img src="../assets/img/photo005.jpg" alt=""></li>
<li><img src="../assets/img/photo006.jpg" alt=""></li>
<li><img src="../assets/img/photo007.jpg" alt=""></li>
<li><img src="../assets/img/photo008.jpg" alt=""></li>
<li><img src="../assets/img/photo009.jpg" alt=""></li>
<li><img src="../assets/img/photo010.jpg" alt=""></li>
<li><img src="../assets/img/photo011.jpg" alt=""></li>
<li><img src="../assets/img/photo012.jpg" alt=""></li>
<li><img src="../assets/img/photo013.jpg" alt=""></li>
<li><img src="../assets/img/photo014.jpg" alt=""></li>
<li><img src="../assets/img/photo015.jpg" alt=""></li>
<li><img src="../assets/img/photo016.jpg" alt=""></li>
<li><img src="../assets/img/photo017.jpg" alt=""></li>
<li><img src="../assets/img/photo018.jpg" alt=""></li>
<li><img src="../assets/img/photo019.jpg" alt=""></li>
<li><img src="../assets/img/photo020.jpg" alt=""></li>
</ul>

var $win = $(window);

$win.on('load resize', function() {
  var windowWidth = window.innerWidth;

  if (windowWidth > 1600) {
$(function() {
    var arr = [];
    $("#photo li").each(function() {
        arr.push($(this).html());
    });
    arr.sort(function() {
        return Math.random() - Math.random();
    });
    $("#photo").empty();
    for(i=0; i < 16; i++) {
        $("#photo").append('<li>' + arr[i] + '</li>');
    }
});
  } else {
$(function() {
    var arr = [];
    $("#photo li").each(function() {
        arr.push($(this).html());
    });
    arr.sort(function() {
        return Math.random() - Math.random();
    });
    $("#photo").empty();
    for(i=0; i < 12; i++) {
        $("#photo").append('<li>' + arr[i] + '</li>');
    }
});
}
});

Answer 1

読み込まれるたびに画像が並び替わるのを止めたいのですね。
原因は、「$win.on('load resize', function() {」がブラウザのサイズを替えるたびに実行され、その中で無条件で配列の並び替えを実行しているためです。
元となる配列arrを外で一度だけ作るようにすれば良いとかと思います。

var $win = $(window);
var arr = [];
$("#photo li").each(function() {
    arr.push($(this).html());
});
arr.sort(function() {
    return Math.random() - Math.random();
});

$win.on('load resize', function() {
  var windowWidth = window.innerWidth;
  $("#photo").empty();
  if (windowWidth > 1600) {
    $(function() {
      for(i=0; i < 16; i++) {
        $("#photo").append('<li>' + arr[i] + '</li>');
    });
  } else {
    $(function() {
      for(i=0; i < 12; i++) {
        $("#photo").append('<li>' + arr[i] + '</li>');
      }
    });
  }
});

Comments

[futon]

ありがとうございます！
返答遅くなり申し訳ありません。

しかも記述までしてくださって恐縮です。
これをそのまま差し替えてみたところランダムの動作がしませんでしたので、else前にカッコを足してみたところ、ランダムの動作はしましたが、今度は全ての画像が「undefined」になってしまいました。

ただ、考え方として画面サイズを変えるたびに実行されてしまうのを、一度にしてあげれば願いが叶う！というのがわかりましたので、ちょっと時間が掛かってしまうと思いますが、またトライしたいと思います。
ありがとうございました！

[futon]

ベストアンサー遅くなり申し訳ありません！
正解例まで丁寧に書いてくださり恐縮です。
結果から言いますと先日表示させることに無事成功しました。
時間があるときに後学のためコード記述したいと思います。
ありがとうございました。