JQuery

AJAX

01. AJAX를 이용하여 Gallery 만들기

결과

HTML

<div class="page-main">
        <ul class="gallery" id="gallery">
        
        </ul>
        <button class="load-more" id="load-more">Load More</button>
    </div>

CSS

*{margin: 0; padding: 0;}
body{background: #aaa;}
li{list-style: none;}
a{text-decoration: none; color: #000; cursor:default;}
.page-main{width: 960px; margin: 0 auto; padding: 0 10px 100px; text-align: center;}
.gallery li{animation: fadeIn 1s; float: left; margin-top: 20px; background: #000; padding: 20px;}
.gallery li img{width: 100%;}
.gallery li a{color: #fff; font-weight: bold;}

@keyframes fadeIn{
    0%{opacity: 0;}
    100%{opacity: 1;}
}
.load-more{
	padding: 10px 20px; 
    background: rgb(0, 0, 0); 
    color: #fff; 
    font-weight: bold; 
    text-align: center; 
    border: none; 
    border-radius: 5px; 
    margin: 20px auto;
    }

script를 보기전에 이거 부터 설정하고 배워보자

ImageLoaded 와 masonry 사용

ImageLoaded 사용

ImageLoaded는 이미지를 masonry를 사용하기전 충분히 로딩을 한 후 작동되게 하려고 사용한다.
이미지를 충분히 로딩하지 못한채로 masonry를 사용하면 겹치는 현상도 발생함.

1. https://imagesloaded.desandro.com/#install 에 들어간다.

2. install 란을 선택하고 Download와 CDN 둘 중 하나를 선택한다.

<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.js"></script>

3. CDN을 선택하여 HTML에 복사한다.

4. JQuery 란을 선택하면 사용방법도 친절히 나온다.

5. script를 작성하여 원하는 위치에 배치한다.

$container.imagesLoaded( function() {
                // images have loaded
                $container.masonry('appended', element)
                });
                if($added < $allData.length){
                    $loadMmore.show();
                }else{
                    $loadMmore.hide();
                }
        }

Masonry 사용

벽돌처럼 쌓아지는 이미지 갤러리를 만들고 싶을때 사용하는 라이브러리이다.

1. https://masonry.desandro.com/ 로 들어간다

2. CDN을 복사한다.

3. Javascript, JQuery 방법이 나온다.

4. script를 작성하고 원하는 곳에 배치한다. 옵션들은 저렇게 설정하고 크기별로 다르게 설정한다.

        $('.gallery').masonry({
            // options
            itemSelector: '.gallery-item',
            columnWidth: 270,
            gutter: 10
          });

---

script

$(function(){
    let $container=$('.gallery'), //갤러리 ul 
        $loadMmore=$('.load-more'), //더보기 버튼
        $added=0, 
        $addItemCount=6, //x개씩 화면에 추가
        $allData=[]; //배열 Json 파일을 불러와서 push를 통해 데이터 가져올 공간 
    	
  		$.getJSON('./data/gallery.json', initGallery);
        function initGallery(data){
            $allData=data;
			$loadMmore.click(function(){
                addItem(); //클릭하면 밑에 있는 함수가 동작되게끔
            });
            addItem();
        };
  
        /* masonry */
        $('.gallery').masonry({
            itemSelector: '.gallery-item',
            columnWidth: 270,
            gutter: 10
          });

        addItem();
        function addItem(){
            let element=[]; //allData는 30개 이건 8개씩 배열에 넣기 위해서 생성함 0번부터 8번 전까지 해야 8개가 갖고나옴
            let slicedData;

            slicedData=$allData.slice($added, $added += $addItemCount)
          //added는 0이고 addItemCount 는 8 : 0~8까지를 의미
          //console.log(slicedData); 
          // 여기까지는 클릭하면 콘솔창에 버튼을 누르면같은 배열 8개만 뜬다
            $.each(slicedData, function(idx, item){ //순번 idx , 배열 item
                let itemHTM=
                    `<li class="gallery-item">
                        <a href="${item.images.large}">
                            <figure>
                                <img src="${item.images.thumb}" alt="${item.title}">
                                <figcaption>
                                    ${item.title}
                                </figcaption>
                            </figure>
                        </a>
                    </li>`/* 벡틱을 이용하여 한번에 감싸기 */
                    element.push($(itemHTM).get(0))
            });
            $container.append(element);

            /* loaded */
            $container.imagesLoaded( function() {
                // images have loaded
                $container.masonry('appended', element)
                });
                if($added < $allData.length){
                    $loadMmore.show();
                }else{
                    $loadMmore.hide();
                }
        }
});