masonry 게시판 질문입니다.
관련링크
본문
https://sir.kr/g5_skin/30908?sfl=wr_subject&stx=masonry
해당 스킨을 이용하여 게시판을 만들었는데 순서가
1, 2, 3
6, 5, 4
9, 8, 7
이런 형태로 나옵니다.
제가 원하는 것은
1, 2, 3
4, 5, 6
7, 8, 9
형태로 나왔으면 하는데 어느부분이 잘못되있는지 도움주실 수 있는 분 있으실까요?
list.skin.php
에 속한 스크립트는 이렇습니다. ↓
<script>
var page = 1;
$(window).load(function(){
var ajaxLoaded = false;
var $grid = $('#bo_gall .gall_row').masonry();
var offset = $(".gw_gl_s_box").offset();
$(window).scroll(function() {
/*
if($(this).scrollTop()> offset.top) {
$('.bo_gall').css({position: 'fixed', top: '0px', left: '0px'});
$(".gw_gl_s_box").css({"margin-top":"50px"});
} else {
$('.bo_gall').css({position: 'static'});
$(".gw_gl_s_box").css({"margin-top":"0px"});
}
*/
if($(this).scrollTop() + $(window).height() > ($(document).height() - 200)) {
if(ajaxLoaded == true){return false;}
ajaxLoaded = true;
page++;
var curr_page = page;
var tmpNum = "";
var data = {
bo_table: '<?php echo $bo_table; ?>',
page: curr_page,
sod : '<?php echo $sod; ?>',
sop: '<?php echo $sop; ?>',
sst : '<?php echo $sst; ?>',
sca: '<?php echo $sca; ?>',
sfl: '<?php echo $sfl; ?>',
stx: '<?php echo $stx; ?>',
loaded: tmpNum
};
//console.log(data);
$.ajax({
url: '<?php echo $board_skin_url;?>/list.skin.ajax.php',
type: 'post',
dataType: 'html',
data: {
bo_table: '<?php echo $bo_table; ?>',
page: curr_page,
sod : '<?php echo $sod; ?>',
sop: '<?php echo $sop; ?>',
sst : '<?php echo $sst; ?>',
sca: '<?php echo $sca; ?>',
sfl: '<?php echo $sfl; ?>',
stx: '<?php echo $stx; ?>',
loaded: tmpNum
},
success: function(html){
$grid.append( html ).masonry( 'appended', $('#bo_gall .gall_row li[data-page='+curr_page+']') );
$grid.imagesLoaded().progress( function() {
$grid.masonry('layout');
});
},
error: function(err,stat,msg) {
alert('통신에러 발생 : ' + msg);
},
complete : function(){
ajaxLoaded = false;
}
});
}
});
});
</script>
답변 1
해당 자바스크립트 라이브러리는 높이 순서대로 정렬이 되도록 되어있습니다.
링크를 확인해보니, 제 예상대로 1(가장 김), 2(중간), 3(가장 짧음) 이렇게 되어있습니다.
그렇기에 4, 5, 6 이 아닌, 6, 5, 4 로 정렬이 되는것입니다.
해결 방법이라면, 해당 라이브러리가 아닌, 원하시는 기능이 동작되는 라이브러리를 사용하시면 될듯합니다.