페이지네이션이아닌, 무한스크롤로 구현하려고 합니다.

페이지네이션이아닌, 무한스크롤로 구현하려고 합니다.

QA

페이지네이션이아닌, 무한스크롤로 구현하려고 합니다.

본문


<div class="tbl_head01 tbl_wrap">
            <div class="section" style="padding:0; margin:0">
                <div class="container" style="max-width: 100% !important;">
                <?php if ($is_admin) { ?>
                <div id="bo_admin" style="margin-bottom:30px">
                    <?php if ($is_checkbox) { ?>
                    <div id="gall_allchk" class="all_chk chk_box">
                        <input type="checkbox" id="chkall" onclick="if (this.checked) all_checked(true); else all_checked(false);" class="selec_chk">
                        <label for="chkall">
                            <span></span>
                            <b class="sound_only">현재 페이지 게시물 </b> 전체선택
                        </label>
                    </div>
                    <?php } ?>
                </div>
                <?php } ?>
                
                
                <div class="cbt"></div>
                
                
                
                
                <div class="portfolio__grid hover--one three--columns">
                    <div class="sizer"></div>

                    <?php for ($i=0; $i<count($list); $i++) {
                        $classes = array();
                        $classes[] = 'gall_li';
                        $classes[] = 'col-gn-'.$bo_gallery_cols;
                        if( $i && ($i % $bo_gallery_cols == 0) ){
                            $classes[] = 'box_clear';
                        }
                        if( $wr_id && $wr_id == $list[$i]['wr_id'] ){
                            $classes[] = 'gall_now';
                        }
                    ?>
                        <div class="item" style="">
                            <?php  if($member['mb_level'] == 10){ //관리자만 가능?>
                                <a data-video="<? echo $list[$i]['wr_10'];?>" class="popyt mov_b2" style="cursor:pointer;">
                            <?php }else if($member['mb_level'] <= 10){ //관리자 아닐때?>
                                <a data-video="<? echo $list[$i]['wr_10'];?>" class="popyt mov_b2" style="cursor:pointer;">
                            <?php }?>
                                <?php
                                    $thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height'], false, true);
                                    if($thumb['src']) {
                                        $img_content = '<img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'" >';
                                    } else if ($list[$i]['wr_10']){
                                        $img_content = '<img src="https://s.ytimg.com/yts/img/favicon_144-vfliLAfaB.png" style="position:absolute; width:30px; margin:15px 20px;"><img src="https://img.youtube.com/vi/'.$list[$i]['wr_10'].'/0.jpg">';
                                    } else {
                                        $img_content = '<div class="no_image">No Image</div>';
                                    }
                                    echo $img_content;
                                ?>
                                <?php //echo ( isset($list[$i]['icon_new']) && !empty($list[$i]['icon_new']) ) ? "<span class='circle'>new</span>" : "";?>
                                 
                                 <div class="caption">
                                 
                                    <div class="inner">
                                        
                                        <?php if ($list[$i]['ca_name']) { ?><span style="color:#fff; font-size:11px; padding:bottom:5px;"><?php echo $list[$i]['ca_name']; ?></span><?php } ?>
                                        
                                        <section style="display:none;" class="ca_name_list_box">
                                        <?php
                                            $categories = explode('|', $is_category);
                                            if ($categories && $list[$i]['ca_name']) { ?>
                                            <?php
                                            echo str_replace($list[$i]['ca_name'], '<h6 style="display: inline-block;color: #333;display: inline-block;padding: 0px 10px;">' . $list[$i]['ca_name'] . '</h6>', $board['bo_category_list']);
                                            }
                                            ?>
                                            
                                            
                                        </section>
                                        
                                        
                                        
                                        <h4><?php echo $list[$i]['subject'] ?></h4>
                                        <p style="margin-top:5px; display: none;"><?php echo $list[$i]['wr_content'] ?></p>
                                        
                                
                            
                                <p class="href_lik" style="display:none"><?php echo $list[$i]['href'] ?></p>
                                <div class="share_btn" style="position:fixed; top:-99999px;">
    <input id="myInput_<?php echo $i ?>" value="<?php echo $list[$i]['href'] ?>" readonly style="position:fixed; top:-99999px;">
    <p onclick='copy_to_clipboard(<?php echo $i ?>)' class="share_btn_p">공유하기 <i class='fas fa-share-alt'></i></p>
</div>
                                  
                                  
                                   <!--<p class="btn_down_link" style="display:none;"><?php echo $list[$i]['file'][0]['href'] ?>&js=on</p>-->
                                   <?php echo "<p class='btn_down_name' style='display: none;'>".$list[$i]['file'][0]['source']."</p>"; ?>
                                   
                                    <span class="down_count" style="display:none; margin-top:10px;"><?php echo $list[$i]['file']['count'] ? '수업에 필요한 첨부파일 자료가 ' . $list[$i]['file']['count'] . '개 있습니다.<br>' : '' ?></span>
                                    
                                   
                                    
                                    
                                     </div>
                                    
                                    <div class="bo_info_in_right" style="float:right; font-weight:100;  display:none;">
                    
                    <?php
                        $url = "https://www.googleapis.com/youtube/v3/videos?key=AIzaSyANTsrUm3O4GbT9qXjXJR1UjzFl1JkUIYU&part=snippet,contentDetails,statistics&id=".$list[$i]['wr_10'];
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$content = curl_exec($ch);
curl_close($ch);
$result = json_decode($content);
$di = new DateInterval($result->items[0]->contentDetails->duration);
echo "<span class='bo_date'>출처 : ".$result->items[0]->snippet->channelTitle."</span><br>";
echo "<span class='bo_date'>동영상 길이 : ".$di->format('%i분%s초')."</span>";
                        ?>
                    
                    <span class="bo_date" style="display:none;"> <i class="fas fa-comments"></i> <?php echo $list[$i]['comment_cnt'] ?></span>
                    
                    <span class="bo_date" style="display:none;"> <i class="fas fa-thumbs-up"></i> <?php echo $list[$i]['wr_good'] ?></span>
                    
                    <!--<span class="bo_date"> <i class="fa fa-clock-o"></i> <?php echo $list[$i]['wr_10'] ?></span>-->
                    <!--
                    <?php if ($list[$i]['comment_cnt']) { ?><span class="sound_only">댓글</span> <i class="fas fa-comments"></i> <?php echo $list[$i]['comment_cnt']; ?> <?php } ?>
                    <?php if ($list[$i]['wr_good']) { ?><i class="fas fa-thumbs-up"></i> <?php echo $list[$i]['wr_good'] ?> <?php } ?>
                    <?php if ($list[$i]['wr_nogood']) { ?><i class="fa fa-thumbs-o-down"></i> <?php echo $list[$i]['wr_nogood'] ?> <?php } ?>--></div>
                                                                                                            
                                </div>
                                
                                
                                    </a>
                            <div class="video_text">
                            <a href="<?php echo $list[$i]['href'] ?>">
                            <span style="font-size:.55em; padding-bottom:10px; width:100%;"><?php echo $list[$i]['ca_name']; ?><span>
                            <h4 style="border-top: 1px solid #4c4e6b; margin-top:5px;"><?php echo $list[$i]['subject'] ?></h4>
        
                            
                            <!--<p> 상세설명 가나다라마바사 아자차카타파하</p>
                            <a href="#" class="more">더보기 ></a>-->
                            
                            
                            </a>
                            
                            
                            
                            
                            <!--<p class="tit_mem" style="color:#0B79B5 !important; display:inline-block;"><?php echo $list[$i]['name'] ?></p>-->
                               
                               
                               
                    <div class="bo_info">
                    <span class="bo_date hit_css"> <i class="fas fa-play"></i> <?php echo $list[$i]['wr_hit'] ?></span>
                    <!--<span class="sound_only">작성자</span><?php echo $list[$i]['name'] ?>-->
                    
                    
                    <div class="bo_info_in_right" style="font-weight:100;">
                    
                    <?php
                        $url = "https://www.googleapis.com/youtube/v3/videos?key=AIzaSyANTsrUm3O4GbT9qXjXJR1UjzFl1JkUIYU&part=snippet,contentDetails,statistics&id=".$list[$i]['wr_10'];
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$content = curl_exec($ch);
curl_close($ch);
$result = json_decode($content);
$di = new DateInterval($result->items[0]->contentDetails->duration);
echo "<span class='bo_date'>출처 : ".$result->items[0]->snippet->channelTitle."</span><br>";
echo "<span class='bo_date'>동영상 길이 : ".$di->format('%i분%s초')."</span>";
                        ?>

                        
                    
                    <span class="bo_date" style="display:none;"> <i class="fas fa-comments"></i> <?php echo $list[$i]['comment_cnt'] ?></span>
                    
                    <span class="bo_date" style="display:none;"> <i class="fas fa-thumbs-up"></i> <?php echo $list[$i]['wr_good'] ?></span>
                    
                    <!--<span class="bo_date"> <i class="fa fa-clock-o"></i> <?php echo $list[$i]['wr_10'] ?></span>-->
                    <!--
                    <?php if ($list[$i]['comment_cnt']) { ?><span class="sound_only">댓글</span> <i class="fas fa-comments"></i> <?php echo $list[$i]['comment_cnt']; ?> <?php } ?>
                    <?php if ($list[$i]['wr_good']) { ?><i class="fas fa-thumbs-up"></i> <?php echo $list[$i]['wr_good'] ?> <?php } ?>
                    <?php if ($list[$i]['wr_nogood']) { ?><i class="fa fa-thumbs-o-down"></i> <?php echo $list[$i]['wr_nogood'] ?> <?php } ?>--></div>
                    </div>
                    </div>
                               
                                
                            <!--<div style="color:#333; float:right;" class="txt">
                                <a href="<?php echo $list[$i]['href'] ?>">
                                <?php if ($list[$i]['comment_cnt']) { ?><span style="font-weight:bold; color:#ff6666;"> <?php echo $list[$i]['wr_comment']; ?><span><?php } ?></a>
                            </div>-->
                            <?php if ($is_checkbox) { ?>
                            <div class="txt" style="font-size:9px; color:#999; letter-spacing:0px; float:right; line-height:25px; text-align:right;">
                                <input type="checkbox" name="chk_wr_id[]" value="<?php echo $list[$i]['wr_id'] ?>" id="chk_wr_id_<?php echo $i ?>">
                            </div>
                            <?php } ?>
                            <div style="clear:both;"></div>
                        </div>
                <?php } ?>
                <?php if (count($list) == 0) { echo '<div class="item" style="width:100%; text-align:center;"><h3 style="width:100%; padding:30px;">등록된 게시물이 없습니다.</h3></div>'; } ?>
                </div></div></div>
                </div>
        <div class="moreBar moreBtm">불러오는 중</div>
        <div class="scrollTop btmScroll"><i class="fa fa-arrow-down"></i> 마우스 스크롤 (다음글 불러오기)</div>

 

이런식으로 구조를 게시판 리스트 구조를 잡아놓았는데, 페이지네이션이아닌, 무한스크롤로 구현하려고 합니다.

 


<script>
    var total_page = "<?=$total_page?>";
    var now_page = "<?=$page?>";
    var roll_page = now_page;
    
    $(window).ready(function(){
        console.log(now_page);
        if(now_page != 1){
            $(".topScroll").show();
        }
        if(roll_page != total_page){
            $(".btmScroll").show();
        }
    });
    $(window).scroll(function(){
        var chkBtm = parseInt($(document).height()) - parseInt($(window).height());
        
        if(chkBtm == $(window).scrollTop()){
            
            roll_page++;
            
            if(roll_page <= total_page){
                callContent(roll_page,'append');
            }
        }else if($(window).scrollTop() == 0){
            
            now_page--;
            if(now_page > 0){
                callContent(now_page,'prepend');
            }
            
        }
    });
    function callContent(a,b){
        if(b=='append'){
            $(".moreBtm").slideDown();
        }else{
            $(".moreTop").slideDown();
        }
        var url = "<?=G5_BBS_URL?>/board.php?bo_table=<?=$bo_table?>&page="+a;
        var tbody = "";
        var thtml = "";
        $.ajax({
            type:"POST",
            url:url,
            dataType : "html",
            success: function(html){
                tbody = html.split('<div class="container" style="max-width: 100% !important;">');
                thtml = tbody[1].split('</div>');
                setTimeout(function() { 
                    if(b=='append'){
                        $(".tbl_head01").find('.container').append(thtml[0]);
                    }else{
                        $(".tbl_head01").find('.container').prepend(thtml[0]);
                    }
                    $(".moreBar").slideUp();
                    
                    if(now_page == 1){
                        $(".topScroll").slideUp();
                    }
                    if(roll_page == total_page){
                        $(".btmScroll").slideUp();
                    }
                }, 1000);
                
            },
            error: function(xhr, status, error) {
                alert(error);
            }  
        });
    }
</script>

스크립트쪽도 이렇게 짜놓았는데, 

뭐가 문제인지 잘 구현이 되지않네요 ㅠㅠ 자문을 구해봅니다 ㅠ

이 질문에 댓글 쓰기 :

답변 1

코드만 보고선 힘들듯합니다. 예제를 봐야할듯하네요

https://sir.kr/g5_skin/27677

여기에 있는 내용을 참고 하였는데, 기본적으로 구조가 테이블 구조로 되어있는데, 지금 구현되어있는 홈페이지는 테이블 구조가 아닌 div구조로 되어있어서 좀 진행이 어려운 상태입니다 ㅠ

답변을 작성하시기 전에 로그인 해주세요.
전체 303
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT