랜덤?으로 자리 배치하는 태그?제이쿼리?

랜덤?으로 자리 배치하는 태그?제이쿼리?

QA

랜덤?으로 자리 배치하는 태그?제이쿼리?

답변 1

본문

안녕하세요~
평등한 방법을 찾다가.. 우연히 생각하는게 있어서 

초보 이렇게 질문 올립니다.

아래와 같이 3개의 사진과 사진설명이 들어갑니다.

접속할때 랜덤으로 자리가 바뀌게 하고 싶습니다.

사진+텍스트

티스토리 블로그와 그누보드 게시판에 작성하려고 합니다.

조언 부탁드립니다. 좋은 하루 보내세요

3672934563_1724813349.0414.jpg

이 질문에 댓글 쓰기 :

답변 1

978180634_1724814116.3688.gif

 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0; padding: 0;}
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
 
        .item {
            margin: 20px;
            text-align: center;
        }
 
        .photo {
            width: 200px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #ddd;
            margin-bottom: 10px;
        }
 
        .text {
            font-size: 16px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        $(document).ready(function() {
            const $container = $('.container');
            const $items = $container.children();
 
            $items.sort(function() {
                return Math.random() - 0.5;
            });
 
            $container.append($items);
        });
            </script>
</head>
<body>
    <div class="container">
        <div class="item" id="item1">
            <div class="photo">사진1</div>
            <div class="text">어쩌구 저쩌구(텍스트)</div>
        </div>
        <div class="item" id="item2">
            <div class="photo">사진2</div>
            <div class="text">아이고 아이고(텍스트)</div>
        </div>
        <div class="item" id="item3">
            <div class="photo">사진3</div>
            <div class="text">이래도 되나 싶다(텍스트)</div>
        </div>
    </div>
</body>
</html>
답변을 작성하시기 전에 로그인 해주세요.
전체 2
© SIRSOFT
현재 페이지 제일 처음으로