魚を繰り返し泳がしてみた[Javascript・anime.js]

<div class="container">
    <img id="hiramasa" class="fish" src="/assets/hiramasa.png">
    <img class="fish" src="/assets/buri.png">
    <img class="fish" src="/assets/buri.png">
    <img class="fish" src="/assets/red_fish.png">
    <img class="fish" src="/assets/aji.png">
    <img class="fish" src="/assets/sawara.png">
    <img class="fish" src="/assets/aji.png">
    <img class="fish" src="/assets/sawara.png">
</div>

import anime from "animejs"

$(window).on("load",function(){

  // ###### 引数で渡した範囲内のランダムな整数を生成するための関数 ######
  var getRandomInt = function(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  };

 // ###### 魚を泳がせる ######
  var fishElements = document.querySelectorAll(".fish");
  fishElements.forEach(fish => {
    anime.speed = 0.6; //animeの全体のスピードの調整
    anime({
      targets: fish, //動かす対象
      translateX: 1000,//移動距離
      loop: true,// 繰り返し
      duration: getRandomInt(1500,5000),//どのくらいアニメーションを継続するか
      easing: 'easeInQuad',//動き
      delay: getRandomInt(0,300),//遅延
    });
  })

  // ########  containerクラスの高さ・幅を取得  #########
    // 要素の取得
  var $container = $('.container'),
  containerHeight = $container.height();
  
    // ####### 魚をそれぞれをランダムに配置 #######
  var $fish = $('.fish')
  $.map($fish, function(item) {
    var $item = $(item), // fishクラスの要素が1番目から順に入ってきます
    topPos = getRandomInt(0, containerHeight), // 130〜コンテナの高さの間でtopの座標を設定
    leftPos = getRandomInt(-700, -200); // -700〜-200の間でleft の座標を設定
    // 取得したランダム座標を設定
    $item.css({
      top: topPos,
      left: leftPos
    });
  });
 

.fish{
  position: absolute;
}

  anime({
      targets: fish,
      translateX: 1000,//移動距離
      loop: true,//繰り返し
      duration: getRandomInt(1500,5000),//どのくらいアニメーションを継続するか
      easing: 'easeInQuad',//動き
      delay: getRandomInt(0,300),//遅延
      //    ↓ここから追加↓
      loopComplete: function(anim) {
        // 取得したランダム座標を設定
        fish.style.top = `${getRandomInt(150,containerHeight)}px`
      }
      //    ↑ここまで↑
    });