jQuery(제이쿼리) 강좌와 예제모음

제이쿼리로 이미지 동적생하고 masonry 로 정렬해 보기 (갤러리 형태 만들기)

전체 기초강좌 만들어보기 초급예제 중급예제 그렇군 대기중 jQuryUI 예제
등록일 :

제이쿼리로 이미지 생성하고 masonry 로 정렬해 보기

1. 제이쿼리로 동적으로 이미지를 생성하기
2. masonry 로 이미지를 정렬해 보기

이 두가지를 해보겠습니다. ^^
그럼 고고싱 !

1. 제이쿼리로 이미지 생성하기

아래 사진들은 제이쿼리로 동적 생성하였습니다.
잘 살펴보면 이미지 높이가 조금씩 달라서 정돈되지 않은 모습입니다.
그리고 정렬도 왼쪽으로 되어있네요.

바꿔봐야 겠죠?
일단 아래 예제의 소스를 먼저 살펴봅시다.

CSS

.wrap img { margin:3px; } /* 이미지에 margin 3px 설정 */

HTML

<div class="wrap"></div>
<!-- 위 div 안에 이미지를 생성합니다 -->

자바스크립트

function zeroFill(sVal, nCnt){ // zeroFill(값, 채울갯수)
	var zero = '';
	var ret  = sVal.toString();
	if(nCnt > 100) return sVal; // 100개 이상 채울 수 없음;;
	for(var i=0 ; i < nCnt-ret.length ; i++){
		zero += '0';
	}
	return zero + ret;
}

// 루프를 돌며 30개의 이미지를 생성
for(var i=1; i<=30; i++){
	// append 메소드를 사용해서 이미지 추가
	$('.wrap').append('<img src="https://biketago.com/img/bg_thumb/bg_' + zeroFill(i, 2) + '.jpg">');
}

어려운 예제는 아닌데 결과물이 조금 마음에 들지 않습니다.
다음 예제에서 masonry 를 사용하여 해결해 보겠습니다.

실행 가능한 소스

2. masonry 를 사용하여 보기좋게 정렬

아래를 보시면 사진 사이사이 간격이 보기 좋게 되었습니다. 그리고 정렬도 가운데로 되었군요.

※ masonry 라이브러리를 사용하면 이런 정렬을 할 수 있습니다.
※ masonry 예제 모음에서 자세한것을 다루겠습니다. (예제 모음 완성시 링크걸게용)

필요한 스크립트 로딩하기

<!-- masonry 로딩 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.0.0/masonry.pkgd.min.js"></script>

<!-- imagesloaded 로딩 (모든 이미지가 로딩된 후 실행되도록 할때 필요) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.0/imagesloaded.pkgd.min.js"></script>

CSS

.wrap { margin:0 auto; } /* 이미지들을 가운데로 정렬하기 위해 설정 */
.wrap img { margin:3px; }

HTML

<div class="wrap"></div>

자바스크립트

function zeroFill(sVal, nCnt){ // zeroFill(값, 채울갯수)
	var zero = '';
	var ret  = sVal.toString();
	if(nCnt > 100) return sVal; // 100개 이상 채울 수 없음;;
	for(var i=0 ; i < nCnt-ret.length ; i++){
		zero += '0';
	}
	return zero + ret;
}


// 83개의 이미지를 생성
for(var i=1; i<=83; i++){
	// 이미지 이름은 bg_01.jpg 같은 숫자 증가 형태
	$('.wrap').append('<img src="https://biketago.com/img/bg_thumb/bg_' + zeroFill(i, 2) + '.jpg">');
}

// wrap 클래스안의 모든 이미지가 로딩되면 masonry 적용
$imgs = $('.wrap').imagesLoaded(function(){
	$imgs.masonry({
		itemSelector : 'img', // img 태그를 대상으로 masonry 적용
		fitWidth : true // 내용물을 가운데 정렬하기, CSS margin:0 auto; 설정이 필요함
	});
});

imagesLoaded 를 사용하지 않으면 이미지가 로딩되기 전에 효과가 적용되어
이미지들이 겹쳐져서 뭉쳐지게 됩니다. imagesLoaded 는 그것을 해결해 줍니다.

실행 가능한 소스