프리랜서 웹디자이너 웹퍼블리셔RELATION

RELATION 로고

홈페이지 소스

[소스] 핀터레스트 레이아웃 + 더보기 (갤러리 소스)

2023.03.30
북마크 [출처 이동]    작성자 정보
* 핀터레스트 Layout + 더보기 버튼 
- http://masonry.desandro.com  /option, method 에 예제를 보고 기존에 있는 이미지 갤러리를 연결해서 테스트 버젼으로 만들었습니다. 
- Tip!! Item position은 setTimeout으로 시간 간격을 주고 해결함.   ( //https://imagesloaded.desandro.com/ <- 이방법도 테스트 예정)


- https://relation.co.kr/images_board/board_system_publishing/139/gallery_ls.php  
 
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        $(document).ready( function(){
            w_resize();
            $(window).resize( function(){
                w_resize();
            });
        });
      
        function w_resize(){
            let bro_with = $("body").width();
            let grid_items = Math.floor(bro_with/250);
            let grid_wd = (250*grid_items)-30;
            $(".grid").css({"width": grid_wd+"px", "margin":"0 auto"});
        }
    </script>
    <style>
        * {  margin:0; padding:0; border:0px; box-sizing: border-box; }
        body { font-family: sans-serif; }
        header { display:block; width:100%; height:80px; line-height:80px; text-align:center; border-bottom:1px solid #ececec;}
        section { display:block; width:100%; margin-top:81px;  }
        footer { display:block; width:100%; height:150px; line-height:150px; text-align:center; border-top:1px solid #ececec; }
        
        .grid_area { display:block; width:100%; }
        .grid { position:relative;  background: #EEE; counter-reset: grid-item; }
        /* clearfix */
        .grid:after {  content: '';  display: block;  clear: both;}
        .grid-item {  position:relative; width: 220px; margin-bottom:30px; /* float:left; background: #D26; border: 2px solid #333;  border-color: hsla(0, 0%, 0%, 0.5); border-radius: 5px;*/}
        .grid-item img { display:block; width:100%; }
        .grid-item:before { position:absolute; left:0; top:0; min-width:30px; height:30px; line-height:30px;  background-color:#000; counter-increment: grid-item; content: counter(grid-item); display: block; color:white;  text-align: center; font-size: 12px; padding:0 5px 0 5px;}
        
        .btn_area { width:100%; height:150px; padding:50px 0 50px 0; box-sizing:border-box;  }
        .btn_area .btn_more { margin:0 auto; display:block; width:150px; height:50px; line-height:50px; text-align:center;  background:#C7C7C7; color:#000; border-radius:25px;   }
        .btn_area .btn_more.append-button  { cursor:pointer; background:#000; color:#fff; }
  </style>
</head>
<body>
    <header>
        HEADER
    </header>
    <section>
        <div class="grid" id="grid_area" >
          <?= $ls ?>
        </div>
      
        <div class="btn_area">
             <div class="btn_more append-button" id="btn_more" data-num="1" data-items="<?=$limit_num?>">MORE(<span id="now_total"><?=$limit_num?></span>/<?=$total?>)</div>
        </div>
        <script src="../../../sys_css_js/masonry.pkgd.min.js"></script>
        <script>
            var $grid = $('.grid').masonry({
                // columnWidth: 160,
                // itemSelector: '.grid-item' 
                itemSelector: '.grid-item',
                // columnWidth: item_margin,
                gutter: 30, //margin-bottom 사용가능
                horizontalOrder: true,
            });
            
            $('.append-button').on('click', function () {
                var start_num  = $("#btn_more").attr("data-num");  
                var start_num2 = Number(start_num)*<?=$limit_num?>;
                var total_items = $("#grid_area > .grid-item").length;
                
                if( <?=$total?> <= total_items ){
                    $("#now_total").text(<?=$total?>);
                    $("#btn_more").removeClass("append-button");
                }else{
                    let dataString = "mode=img_ls&start_num2="+start_num2+"&limit_num=<?=$limit_num?>";
                    $.ajax({
                        type : "post",
                        url : "ajax_ls.php",
                        data : dataString,
                        async: false,
                        success : function(data){
                            var data_obj = $(data);
                            setTimeout( function(){ 
                                $grid.append( data_obj ).masonry( 'appended', data_obj );
                                let total_items2 = $("#grid_area > .grid-item").length;
                                $('#now_total').text(total_items2);
                            },500);
                          
                            let next_num = Number(start_num)+1;
                            $("#btn_more").attr("data-num", next_num);
                        }
                    });
                } 
            });
        </script>
    </section>
    <footer>
        Footer    
    </footer>

 

이 포스트 공유하기

전체목록