body{ margin: 0; padding: 0; } .container { margin: 0 auto; width: 100%; height: 500px; background: skyblue; position: relative; overflow: hidden; } .imgList { height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; } .imgList > li { list-style: none; text-align: center; position: absolute; } .imgList > li img { height: 65px; opacity: .5; } .bg{ background: url(https://twotone.me/wp-content/uploads/2020/05/town.png) repeat-x bottom/contain; position: absolute; bottom: 0; left: 0; right: 0; height: 120px; opacity: .8; }
jQuery(function($){ // 引数で渡した範囲内のランダムな整数を生成するための関数 var getRandomInt = function(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }; // 要素の取得 var $container = $('.container'), $imgList = $('.imgList').find('li'), containerWidth = $container.width(),//コンテンツ幅取得 containerHeight = $container.height()/1.75;//コンテンツ高さ取得 // 前回作成した条件を関数化 function makeArray(value,list_arr,margin){ var max_num = value,//ランダムで生成する最大値 array = [], random = getRandomInt(0, max_num),//ランダム数値生成 num = margin,//範囲数値 i=0, len = array.length,//配列の数 loop = 0,//無限ループ対策 max_len = list_arr;//配列の最大数 array.push(random); console.log('初期値'+random+'を生成'); while(true){ len = array.length; loop = 0;//無限ループ対策 for (i = 0; i = min && random <= max) || array.includes(random) || random == 0){//左から:random数値が最小and最大の範囲外かどうか検証 or random数値が配列の数値と被らないか検証 or random数値が0じゃないかどうか検証 random = getRandomInt(0, max_num);//再度数値をリセット console.log('ランダム数値【'+random+'】を生成'); if(!i == 0){ i=0;//変数をリセットして配列の一番最初から再スタート } min = array[i]-num; max = array[i]+num; if(Math.sign(min) == -1){ min = 0; } //①ここから console.log('loopは'+loop+'回目'); if(loop == 30){//無限ループ対策 loop = 0; console.log('無限ループ脱出'); break; } loop++; //①ここまで } } array.push(random);//配列に被らない数値を追加 console.log(random+'を追加'); if(Math.floor(max_len)-1 == len){//最後のループになったらwhileループを抜けるための条件式 // alert('配列と数値、範囲が被らない数値は【 '+array+' 】です'); return array; break; } } } //生成した配列を変数に代入 var topPos = makeArray(containerHeight,$imgList.length,20); var leftPos = makeArray(containerWidth,$imgList.length,80); alert('Y軸の数値'+topPos+'\nX軸の数値'+leftPos); // ランダム座標を設定 $imgList.each(function(index) { $(this).css({ top: topPos[index], left: leftPos[index] }); }); });
【javascript】ランダム配置した画像が極力位置が被らないように調整
2020/05/22