본문 바로가기
javaScript/jQuery

jQuery 이미지 가로 정렬 구하기

by mooyou 2022. 4. 20.
728x90
300x250
SMALL

jQuery를 이용해서 이미지 가로 정렬 구하는 방법

 

html
<div id="img-list">
    <img src="http://placeimg.com/150/200/people" alt="img">
    <img src="http://placeimg.com/150/200/people" alt="img">
    <img src="http://placeimg.com/150/200/people" alt="img">
    <img src="http://placeimg.com/150/200/people" alt="img">
    <img src="http://placeimg.com/150/200/people" alt="img">
</div>

 

css
#img-list img {position:absolute; width: 100px;height: 100px;padding: 10px;}

css positon:absoute로 변경해 줘야 한다.

 

jQuery
let $imgList = null; //이미지를 담을 imgList제이쿼리 변수 선언
$(document).ready(function() {
    $imgList = $("#img-list img"); //이미지를 찾아서 $imgList에 넣는다.
    console.log ($imgList.length);
    for(let i=0 ; i < $imgList.length ;i++) { // 이미지 개수만큼 반복
        let $img = $imgList.eq(i); //이미지를 한개씩 $img에 저장

        let x = i * 120; //  x값 구하기
        let y = Math.floor($imgList.length/2) * 120; // y값 구하기

        $img.css({ // 이미지 위치 적용
            left:x,
            top:y
        });
    }
});

 

x값은 이미지 넓이 값이 100이고 양쪽 padding값이 10이기 때문 120씩 인덱스 값에 곱해준다.

그러면 첫 번째 이미지부터 0, 120, 240 이런 식으로 x위치가 지정된다.

y값은 가운데 위치 하도록 전체 이미지 개수의 절반 값을 구한다. 그러면 2.5개가 되는데 Math.floor를 이용해서 소수점 버림을 해서 2 값을 구하고 역시나 높잇값 100, 위아래 padding 20 해서 120을 곱해준 위치에 지정해 준다.

 

 

결과화면

 

728x90
반응형
LIST

'javaScript > jQuery' 카테고리의 다른 글

[jquery]모바일 메뉴 슬라이드  (0) 2022.06.26
[jQuery] top 메뉴 슬라이드  (0) 2022.06.25
jQuery 제이쿼리 cdn 최신버전 사용하기  (0) 2022.04.18
jQuery 이미지 위치 설정하기  (0) 2022.03.30
jQuery cdn 사용하기  (0) 2022.01.31

댓글