사진 위치를 랜덤하게 해주고 싶습니다
관련링크
http://위치
58회 연결
본문
안녕하세요
사진의 위치를 고정이 아닌 변동을 주고 싶은데 어떻게 하면 될까요?
현재
<div class="col text-center mx-auto px-0 pb-2">
<a href="https://google.com" target="_blank" class="ad_banner" data-ad_id="1" data-ad_group="MAIN1">
<img src="https://https://google.com/vast/1.gif" class="pb-2 img-fluid">
</a>
<a href="https://google.com/" target="_blank" class="ad_banner" data-ad_id="22" data-ad_group="MAIN1">
<img src="https://https://google.com/vast/2.gif" class="pb-2 img-fluid">
</a>
<a href="https://google.com" target="_blank" class="ad_banner" data-ad_id="35" data-ad_group="MAIN1">
<img src="https://https://google.com/vast/1.gif" class="pb-2 img-fluid">
</a>
<a href="https://google.com" target="_blank" class="ad_banner" data-ad_id="22" data-ad_group="MAIN1">
<img src="https://https://google.com/vast/1.gif" class="pb-2 img-fluid">
</a>
<a href="https://google.com" target="_blank" class="ad_banner" data-ad_id="22" data-ad_group="MAIN1">
<img src="https://https://google.com/vast/1.gif" class="pb-2 img-fluid">
</a>
<a href="https://google.com" target="_blank" class="ad_banner" data-ad_id="22" data-ad_group="MAIN1">
<img src="https://https://google.com/vast/1.gif" class="pb-2 img-fluid">
</a>
<a href="https://google.com" target="_blank" class="ad_banner" data-ad_id="22" data-ad_group="MAIN1">
<img src="https://https://google.com/vast/1.gif" class="pb-2 img-fluid">
</a>
<a href="https://google.com" target="_blank" class="ad_banner" data-ad_id="22" data-ad_group="MAIN1">
<img src="https://https://google.com/vast/1.gif" class="pb-2 img-fluid">
</a>
<a href="https://google.com" target="_blank" class="ad_banner" data-ad_id="22" data-ad_group="MAIN1">
<img src="https://https://google.com/vast/1.gif" class="pb-2 img-fluid">
</a>
<a href="https://google.com" target="_blank" class="ad_banner" data-ad_id="22" data-ad_group="MAIN1">
<img src="https://https://google.com/vast/1.gif" class="pb-2 img-fluid">
</a>
<a href="https://google.com" target="_blank" class="ad_banner" data-ad_id="22" data-ad_group="MAIN1">
<img src="https://https://google.com/vast/1.gif" class="pb-2 img-fluid">
</a>
<a href="https://google.com" target="_blank" class="ad_banner" data-ad_id="22" data-ad_group="MAIN1">
<img src="https://https://google.com/vast/1.gif" class="pb-2 img-fluid">
</a>
</div>
이런식으로 설정되있습니다
해당 부분은 다른사이트 코드를 참고 하였습니다
도움주셔서 진심으로 감사합니다
!-->답변 4
https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp
https://www.freecodecamp.org/news/how-to-create-an-image-gallery-with-css-grid-e0f0fd666a5c/
이런 거를 원하시는 건가요?
워드프레스 위젯 html 사용중입니다
위치배열을 고정이 아닌 랜덤으로 하고 싶습니다.....
<center>
<a href="http://sample.com/" target="_blank"><img src="https://sample.com/sample.gif" width=""></a>
<a href="http://sample1.com/" target="_blank"><img src="https://sample1.com/sample.gif" width=""></a>
<a href="http://sample2.com/" target="_blank"><img src="https://sample2.com/sample.gif" width=""></a>
<a href="http://sample3.com/" target="_blank"><img src="https://sample3.com/sample.gif" width=""></a>
<a href="http://sample4.com/" target="_blank"><img src="https://sample4.com/sample.gif" width=""></a>
</center>
<script>
$(function() {
var $bn = $('a:has(img[src^="/bn/"])');
var $wp = $bn.first().parent();
var shuffled = [...$bn].map(a => ([Math.random(),a])).sort((a,b) => a[0]-b[0]).map(a => a[1]);
// var shuffled = Array.prototype.slice.call($bn).map(function(a){return [Math.random(),a]}).sort(function(a,b){return a[0]-b[0]}).map(function(a){return a[1]});
$wp.empty().append($(shuffled)).children(':nth-child(3n)').after($('<br><br>'));
});
</script>
저 이미지를 출력하는 것이
A, php인가요? 아니면
B html 고정인가요?
A이면 array 등에 넣고 shuffele등으로 섞어서 loop를 돌리면 되고
B라면 자바 스크립트를 사용하는 수밖에 없겠네요.
https://stackoverflow.com/questions/1533910/randomize-a-sequence-of-div-elements-with-jquery
해당 자료를 봤지만.. 초보자여서 ㅠㅠ 따라하기 어렵네요 ㅠㅠ
답변을 작성하시기 전에 로그인 해주세요.