[소스] 핀터레스트 레이아웃 + 더보기 (갤러리 소스)
2023.03.30
작성일/수정일
2023-03-30 15:40:40 / 2023-03-30 15:40:40
* 핀터레스트 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>
