클릭하면 바둑판식으로 이미지 배열하기

   <style>
        div.image-container {
            position: relative;
        }

        div.image-container img {
            position: absolute;
            left: 0;
            top: 0;
            width: 120px;
        }
        #btnStart {
            padding:5px;
            margin-bottom:5px;
        }
    </style>
 
<script>
        $(document).ready(function() {
            $("#btnStart").click(function() {
                var $images = $("img");
                var length = $images.length;
                for (var i = 0; i < length; i++) {
                    var $img = $images.eq(i);
                    var x = 100 + ((i % 3) * 200);
                    var y = 100 + (parseInt(i / 3) * 200);
                    $images.eq(i).css({
                        left : x,
                        top : y
                    });
                }
            });
        });
 
    </script>
 
    <div>
        <button id="btnStart">
            배열시작
        </button>
    </div>
    <div class="image-container">
        <img src="banners/1.png" >
        <img src="banners/2.png" >
        <img src="banners/3.png" >
        <img src="banners/4.png" >
        <img src="banners/5.png" >
        <img src="banners/6.png" >
        <img src="banners/7.png" >
        <img src="banners/8.png" >
    </div>
 

버튼을 클릭하면 이미지를 찾고

이미지의 개수를 구한다.

var $img = $images.eq(i); 이미지 목록에서 n번째 이미지를 가져온다

이미지 위치값을 구한다.

left = 100(left 시작위치 값)+((N%3)*200);

top = 100(top 시작위치 값)+(parseInt(N/3)*200);

parseInt 이용해서 정수로 형변환