[JAVASCRIPT] masonry를 활용하여 더 보기 기능 구현

[JAVASCRIPT] masonry를 활용하여 더 보기 기능 구현

더 보기 버튼 클릭 시 해당 갯수만큼 비동기 처리로 리스트를 가져옵니다.
블럭형 플러인 masonry.pkgd.min.js 를 사용했으며 이미지가 있는 경우 imagesloaded.pkgd.min.js 적용하였습니다.

stap1

//pom.xml 에서 필요한 라이브러리를 dependencies 합니다.
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.9.7</version>
</dependency>

stap2

//공통적으로 처리야 하기때문에 필요한 변수를 객체화 합니다.
<ul class="list_display">
    <li th:each="item, row : ${list}">
        ...해당리스트
    </li>
</ul>
<div class="btn_wrap">
   <a href="javascript:common_view_more();" class="btn_more">더보기</a>
</div>
<script>
    /*<![CDATA[*/
    var vewMoreVar = {
        type: '[[${type}]]',
        url : '/sekm/dictionary/view/',
        apiUrl : '/sekm/api/more/dictionary/list',
        templateType : 'B',
         page : [[${paging.page}]],
        size : [[${paging.size}]]
      }
    /*]]>*/
    //리스트가 10개가 아닐 경우 더보기 버튼을 제거합니다.
    if ( $('.list_display li').length < 10 ){
        $('.btn_more').remove();
    }
    //초기 진입 시 li태그에 블럭 효과를 줍니다.
    var $container = $('.list_display').masonry({
        itemSelector: 'li',
        percentPosition: true
    });
</script>

stap3 초기함수 진입

commonVieMore.js
function common_view_more(){

    //더보기 클릭 시 마다 page 번호를 증가 시켜준다.
    vewMoreVar.page++;
    var resultData = common_more_view_data(vewMoreVar); //ajax call
    if(resultData != '' && resultData != null && resultData != '[]'){
        //stap2 result view
        common_view_more_list(resultData, $container);
    }else{
        //데이터가 없을 경우 더보기 버튼 css 효과를 줍니다.
        $('.btn_more').css("background-color","#dcdcdc");
    }
}

stap4 리스트 ajax 호출

function common_more_view_data(dataObj){
    var returnResult;
    $.ajax({
        type    :   'POST',
        url     :   vewMoreVar.apiUrl,
        data    :   dataObj,
        dataType:   'json',
        async: false,
        success :   function(result) {
            console.log("returnResult:" + result);
            returnResult = result;
        },error:function(request,status,error){
            console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
        }
    });
    return returnResult;
}

stap5 더보기 시 블럭효과 주기 위해 데이터 append 처리

function common_view_more_list(result, $container){
    var elemtnts = [];
    for(i=0; i < result.length; i++){

        var contetns;
        //template make
        if(vewMoreVar.templateType === 'A'){
            contetns = $(common_template_element_a(result[i])).get(0);
        }else if(vewMoreVar.templateType === 'B'){
            contetns = $(common_template_element_b(result[i])).get(0);
        }
        elemtnts.push(contetns);
    }
    //이미지가 있는 경우 load 되는 시점에 블럭효과를 주어야한다.
    if(vewMoreVar.templateType === 'B'){
        $container.append(elemtnts);
        $container.imagesLoaded(function() {
            $container.masonry('appended', elemtnts );
        });
    }else{
        $container.append(elemtnts).masonry('appended', elemtnts );
    }
}

stap6 공통 함수이기 떄문에 템플릿 정의

function common_template_element_a(resultData){
     var content;
    content += '<li>';
        content += '<div class="item_display">';
            content += '<div class="tag_wrap">';
                content += '<a href='+vewMoreVar.contentUrl+'/'+resultData.data_no+' class='+classType+'>'+resultData.tag1+'</a>'
            content += '</div>';
            content += '<a href='+vewMoreVar.contentUrl+'/'+resultData.data_no+' class="s3tit">'+resultData.name_basic+'</a>';
        content += '</div>'
    content += '</li>';
    return content;
}

function common_template_element_b(resultData){
    ......위와같은 형식의 템플릿 정의
}