13강 - Masonry 사용법

실무에서 많이 쓰는 이벤트 애니메이션

• gsab
• wowjs
• aos
• cdn, js 소스 가져오면 됨

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">

<link rel="stylesheet" href="index.css">
<script defer src="index.js"></script>

<div class="section-1-loading"></div>




<!-- 라이브러리 순서 -->
<!-- 유명한 순서부터 안유명한 순서로  -->
<!-- js는 script defer src를 사용하면 위에있는 라이브러리 먼저 적용후 나중에 적용된다. -->

<section class="section-1">
    <div class="container mx-auto masonry-grid">
        <div class="grid-item">
            <a href="#">
                <img src="https://picsum.photos/id/237/236/300" alt="">
            </a>
            <a href="#">
                제목1
            </a>
        </div>
        <div class="grid-item">
            <a href="#">
                <img src="https://picsum.photos/id/287/236/410" alt="">
            </a>
            <a href="#">
                제목2
            </a>
        </div>
        <div class="grid-item">
            <a href="#">
                <img src="https://picsum.photos/id/247/236/500" alt="">
            </a>
            <a href="#">
                제목3
            </a>
        </div>
        <div class="grid-item">
            <a href="#">
                <img src="https://picsum.photos/id/217/236/460" alt="">
            </a>
            <a href="#">
                제목4
            </a>
        </div>
        <div class="grid-item">
            <a href="#">
                <img src="https://picsum.photos/id/267/236/300" alt="">
            </a>
            <a href="#">
                제목5
            </a>
        </div>
    </div>
</section>

<!-- masonry-grid 밑에는 항상 gird-item 을 사용한다. -->

/* 커스텀 */
.section-1-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

.section-1-loading::after {
  content: "로딩중...";
/*   나중에 이미지를 넣어두 됨   */
}

.section-1 .grid-item {
  padding:10px;
}

.section-1 .grid-item > a {
  display:block;
}

.section-1 .grid-item > a > img {
  display:block;
  width:100%;
  border-radius : 15px;
}

@media ( min-width:1600px ) {
  .section-1 .grid-item {
    width: calc(100% / 5);
  }
}

@media ( max-width:1599px ) and ( min-width:1200px ) {
  .section-1 .grid-item {
    width: calc(100% / 4);
  }
}

@media ( max-width:1199px ) and ( min-width:800px ) {
  .section-1 .grid-item {
    width: calc(100% / 3);
  }
}

@media ( max-width:799px ) and ( min-width:600px ) {
  .section-1 .grid-item {
    width: calc(100% / 2);
  }
}

@media ( max-width:599px ) {
  .section-1 .grid-item {
    width: calc(100% / 1);
  }
}

console.clear();

var $window = $(window);
var $html = $('html');

var PageLayout__ani1Delay = 500;

function PageLayout__init() {

  $('.section-1').imagesLoaded(function() {
    setTimeout(function() {
      $('.section-1-loading').remove();
    }, PageLayout__ani1Delay + 300);

    $('.section-1 .masonry-grid').masonry({
      itemSelector: '.grid-item'
    });
    
    $window.resize(_.debounce(function() {
        console.log('hi');
      $('.section-1 .masonry-grid').masonry('layout');
    }, PageLayout__ani1Delay + 200));
  });
}

$(function() {  
  PageLayout__init();
});

• 코드펜으로 완성된 코드 한번에 보러가기