画像のランダム配置について

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 81

so68_so78

score 1

前提・実現したいこと

web初心者のため、伝わらなかったら申し訳ないのですが、
500近くある画像をphpでランダムに50個抽出し、且つ配置をランダムにしたいです。

該当のソースコード

<?php 
    echo '<div class="test"><div class="test2">';
    $name = array(
        '1',
        '2',
        '3',
         ・
         ・
         ・
        '500'
    );
    $check = array_fill(0,500,0);
    $a = 0;
    while($a < 50){
        $i = rand(0,499);
        if( $check[$i] != 1 ){
        $check[$i] = 1;
        echo '<img src="test/'. $name[$i] .'.png">';
        $a++;
        }
    }
    echo '</div></div>';
 ?>
.test{
    position: relative;
    width: 100vw;
    height: 100vh;
}
.test2 img{
    position: absolute;
}


https://teratail.com/questions/27367 こちらのものをコピペさせて頂きました。

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

// 要素の取得
var $container = $('.test'),
  $wordList = $('.test2').find('img'),
  containerWidth = $container.width(),
  containerHeight = $container.height();

console.log(containerWidth, containerHeight)

// liそれぞれをランダムに配置
$.map($wordList, function(item, index) {
  var $item = $(item),
    topPos = getRandomInt(0, containerHeight),
    leftPos = getRandomInt(0, containerWidth);

  // 取得したランダム座標を設定
  $item.css({
    top: topPos,
    left: leftPos
  });
});


以上のコードで、ランダムに抽出、配置はできるのですが、
画像が思いっきり重なって表示されてしまいます。
画像の数が今後増える可能性もあり全て読み込むのは避けたいためランダム抽出自体はphpで行いたいです。
画像が重ならないように(重なっても数px程度に)変更できれば理想で、
ランダムに配置する際、画像の向きもランダムにすることが可能でしたら、方法やヒントを教えて頂きたいです。
よろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/09/11 10:09

    あと「可能ですか?」だと「可能です」としか答えようがないので
    そのあたり、欲しいアドバイスが得られやすいように調整いただけたらと

    キャンセル

  • so68_so78

    2019/09/11 10:13

    いえ、全て正方形です。画像自体は500×500なのですが、ランダム配置が上手くいきましたら大きさを調整しようと思っておりました。

    キャンセル

  • so68_so78

    2019/09/11 10:19

    申し訳ありません。修正を致しました。

    キャンセル

回答 1

checkベストアンサー

+2

とりあえず.test2 img position: absolute;を外すかrelativeに変更すれば重ならなくなります。
あとは「どう表示させたいか」ですね。

画像の向きもランダムにすることが可能でしたら、方法やヒントを教えて頂きたいです。

となるとGDライブラリとかで画像表示前に回転させるとかですかね。
HTMLにPHPコード埋め込むより<img src="img.php?id=1">のようにしてimg.phpで画像読み込み→ヘッダーContent-type: image/png送信して表示
させたほうがコードとしてはスッキリしそうです。


余談:
画像が連番であればもっと簡単にリストを作れます。

$imglist = array_fill(1, 500, 'img');
$keys = array_rand($imglist, 50);
var_dump($keys);

※これはあくまで配列関数一覧を眺めて組み合わせたらいけそうかなと思って使ったもので、確立されたやり方があるわけではなく発想です

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/09/11 19:15

    お礼が遅くなり、大変申し訳ありません。ありがとうございます!GDライブラリのリンクが大変参考になりました。もう少しで思い通りにできそうなので、頑張ってみます。本当にありがとうございました。

    キャンセル

  • 2019/09/11 20:22

    解決されたようで何よりです
    PHPマニュアル活用してくださいね

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.22%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる