랜덤?으로 자리 배치하는 태그?제이쿼리?
본문
안녕하세요~
평등한 방법을 찾다가.. 우연히 생각하는게 있어서
초보 이렇게 질문 올립니다.
아래와 같이 3개의 사진과 사진설명이 들어갑니다.
접속할때 랜덤으로 자리가 바뀌게 하고 싶습니다.
사진+텍스트
티스토리 블로그와 그누보드 게시판에 작성하려고 합니다.
조언 부탁드립니다. 좋은 하루 보내세요
답변 1
<!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>
너무 너무 감사합니다.
속이 시원해졌어요^^
건강하시고 행복하세요^^
답변을 작성하시기 전에 로그인 해주세요.
