jQuery

[ jQuery ] Masonry 플러그인하여 박스 애니메이션 효과 주기

dauneee 2022. 2. 23. 17:35

 

 

 

1) Masonry 접속하여 원하는 레이아웃 선택하기

 

 

 

Masonry · Options

Options All options are optional, but columnWidth and itemSelector are recommended. $('.grid').masonry({ columnWidth: 200, itemSelector: '.grid-item' }); var msnry = new Masonry( '.grid', { columnWidth: 200, itemSelector: '.grid-item' }); Recommended itemS

masonry.desandro.com

 

 

2) jquery와 Masonry 연결하기

 

 

<!-- jquery 연결 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
	integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
	crossorigin="anonymous"></script>

<!-- masonry 연결 -->
<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>

 

 

3) Java Script 작성하기

 

<script>
	$(document).ready(function() {

		for (var i = 0; i < 100; i++) {
			if (i % 2 == 0) {
				$('<div></div>').addClass('box').css({
					width : 100,
					height : Math.floor(Math.random() * 100) + 50
				}).appendTo('body');
			} else {
				$('<div></div>').addClass('box2').css({
					width : 100,
					height : Math.floor(Math.random() * 100) + 50
				}).appendTo('body');
			}
		}

		$('body').masonry({
			transitionDuration : '3s'
		});
	});
	
</script>

 

 

4) 박스 CSS 적용하기 

 

<style>
* {
	margin: 0;
	padding: 0;
}

.box {
	background: lightblue;
	margin: 5px;
}

.box2 {
	background: lightpink;
	margin: 5px;
}
</style>

 

 

 

< 전체 코드 >

 

<!DOCTYPE html>
<html lang="ko">
<head>
<title>Masonry 플러그인</title>

<style>
* {
	margin: 0;
	padding: 0;
}

.box {
	background: lightblue;
	margin: 5px;
}

.box2 {
	background: lightpink;
	margin: 5px;
}
</style>

<!-- jquery 연결 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
	integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
	crossorigin="anonymous"></script>

<!-- masonry 연결 -->
<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>

<script>
	$(document).ready(function() {

		for (var i = 0; i < 100; i++) {
			if (i % 2 == 0) {
				$('<div></div>').addClass('box').css({
					width : 100,
					height : Math.floor(Math.random() * 100) + 50
				}).appendTo('body');
			} else {
				$('<div></div>').addClass('box2').css({
					width : 100,
					height : Math.floor(Math.random() * 100) + 50
				}).appendTo('body');
			}
		}

		$('body').masonry({
			transitionDuration : '3s'
		});
	});
	
</script>
</head>
<body>

</body>
</html>