로날듀우

안녕하세요~ for문과 CSS 질문입니다.

 
위의 사이트 처럼 for문으로 반복하여 어떠한 이미지와 내용을 출력하려고 하는데요.
 
기존의 테이블 방식으로
 
for 안에 td로 출력을 하면 칸이 일정하기에 저렇게 길이가 달라도 일정한 정렬로 나오지 않는데...
 
어떻게 하면 저러한 방식으로 나오게 되나요...?
|

댓글 2개

저건 테이블로 코딩한 것이 아닌거 같습니다.
요즘 유행하는 인터페이스인데, 저건 display: absolute를 줘서 jquery로 넓이변경 이벤트를 주면 각 row의 넓이에 맞게 계산되어 자동으로 포지셔닝 하게끔 만들어졌습니다.

사파리나 구글크롬으로 개발자 도구를 통해 보시면 될듯합니다.

프론트를 좀 하실줄 안다면 간단한 수학 공식을 세우면 창넓이 변경 이벤트, 스크롤시 하단 내용 ajax로 불러오기 등을 구현할 수 있습니다.
그리고 계산방법은
포지셔닝이 필요한 class 오브젝트 그룹의 이름을 .event-div라고 하면
var baseWidth = 120; 가 하나의 row의 넓이라고 한다면
var paddingLeft = 10; 각 row의 간격을 주고
var paddingTop = 10; 각 row의 아이템들의 상하 간격

$(window).resize이벤트를 걸고
var row = Math.ceil($(window).width() / baseWidth)가 윈도우의 사이즈를 구하는 것인데, 각기 나눠서 몇개의 row로 보여줄지 정한 후

var top = {}; 각 row의 top의 높이를 저장하는 해쉬를 만들고

$(".event-div").each(function(idx, object) 함수를 써서

var widthRows = idx % row;
top[widthRows] += paddingTop; (상하간격 만큼더한 후)
$(this).css({
left: (widthRows * baseWidth) + paddingLeft
top: top[widthRows]
});
//포지션을 잡게 해주고

top[widthRows] += $(this).height();

});

이렇게 하면 대충 구현이 될듯 합니다.
이건 윈도우 사이즈 변경시에 일어나는 이벤트고
첫 구동시 이벤트도 이와 유사하게 구현하면 될듯합니다.
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

+
제목 글쓴이 날짜 조회
13년 전 조회 2,649
13년 전 조회 2,186
13년 전 조회 2,066
13년 전 조회 2,135
13년 전 조회 2,457
13년 전 조회 2,023
13년 전 조회 2,637
13년 전 조회 2,136
13년 전 조회 2,014
13년 전 조회 2,186
13년 전 조회 2,121
13년 전 조회 3,118
13년 전 조회 2,447
13년 전 조회 2,378
13년 전 조회 3,220
13년 전 조회 2,430
13년 전 조회 1,897
13년 전 조회 2,033
13년 전 조회 2,771
13년 전 조회 2,207
13년 전 조회 2,011
13년 전 조회 2,135
13년 전 조회 4,113
13년 전 조회 2,809
13년 전 조회 2,593
13년 전 조회 2,032
13년 전 조회 1,971
13년 전 조회 1,790
13년 전 조회 2,187
13년 전 조회 2,282
13년 전 조회 4,462
13년 전 조회 2,264
13년 전 조회 2,457
13년 전 조회 2,142
13년 전 조회 2,036
13년 전 조회 2,164
13년 전 조회 2,163
13년 전 조회 2,413
13년 전 조회 3,995
13년 전 조회 4,435
13년 전 조회 2,471
13년 전 조회 2,543
13년 전 조회 2,009
13년 전 조회 3,013
13년 전 조회 2,083
13년 전 조회 2,094
13년 전 조회 1,935
13년 전 조회 2,523
13년 전 조회 2,070
13년 전 조회 2,456
13년 전 조회 2,325
13년 전 조회 1,958
13년 전 조회 3,572
13년 전 조회 2,529
13년 전 조회 2,372
13년 전 조회 2,297
13년 전 조회 2,132
13년 전 조회 1,942
13년 전 조회 1,851
13년 전 조회 2,618
13년 전 조회 2,362
13년 전 조회 2,013
13년 전 조회 7,120
13년 전 조회 1,980
13년 전 조회 1,924
13년 전 조회 1,851
13년 전 조회 1,936
13년 전 조회 2,460
13년 전 조회 2,061
13년 전 조회 2,261
13년 전 조회 2,471
13년 전 조회 2,021
13년 전 조회 3,040
13년 전 조회 1,931
13년 전 조회 1,940
13년 전 조회 2,529
13년 전 조회 2,633
13년 전 조회 3,319
13년 전 조회 1,998
13년 전 조회 2,081
13년 전 조회 1,996
13년 전 조회 2,672
13년 전 조회 3,258
13년 전 조회 2,373
13년 전 조회 2,598
13년 전 조회 2,082
13년 전 조회 1,821
13년 전 조회 1,826
13년 전 조회 2,314
13년 전 조회 3,135
13년 전 조회 2,904
13년 전 조회 2,509
13년 전 조회 2,560
13년 전 조회 1,737
13년 전 조회 2,042
13년 전 조회 3,348
13년 전 조회 1,866
13년 전 조회 1,847
13년 전 조회 5,876
13년 전 조회 2,436