로날듀우

안녕하세요~ 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,632
13년 전 조회 2,174
13년 전 조회 2,051
13년 전 조회 2,118
13년 전 조회 2,438
13년 전 조회 2,004
13년 전 조회 2,627
13년 전 조회 2,122
13년 전 조회 1,997
13년 전 조회 2,173
13년 전 조회 2,109
13년 전 조회 3,104
13년 전 조회 2,433
13년 전 조회 2,363
13년 전 조회 3,214
13년 전 조회 2,417
13년 전 조회 1,889
13년 전 조회 2,023
13년 전 조회 2,758
13년 전 조회 2,198
13년 전 조회 1,997
13년 전 조회 2,124
13년 전 조회 4,100
13년 전 조회 2,791
13년 전 조회 2,577
13년 전 조회 2,021
13년 전 조회 1,960
13년 전 조회 1,781
13년 전 조회 2,170
13년 전 조회 2,279
13년 전 조회 4,451
13년 전 조회 2,249
13년 전 조회 2,444
13년 전 조회 2,127
13년 전 조회 2,023
13년 전 조회 2,157
13년 전 조회 2,158
13년 전 조회 2,400
13년 전 조회 3,980
13년 전 조회 4,420
13년 전 조회 2,458
13년 전 조회 2,537
13년 전 조회 1,998
13년 전 조회 2,999
13년 전 조회 2,069
13년 전 조회 2,089
13년 전 조회 1,926
13년 전 조회 2,513
13년 전 조회 2,051
13년 전 조회 2,438
13년 전 조회 2,321
13년 전 조회 1,946
13년 전 조회 3,560
13년 전 조회 2,525
13년 전 조회 2,357
13년 전 조회 2,285
13년 전 조회 2,117
13년 전 조회 1,924
13년 전 조회 1,844
13년 전 조회 2,613
13년 전 조회 2,347
13년 전 조회 2,001
13년 전 조회 7,104
13년 전 조회 1,974
13년 전 조회 1,910
13년 전 조회 1,836
13년 전 조회 1,923
13년 전 조회 2,444
13년 전 조회 2,046
13년 전 조회 2,253
13년 전 조회 2,459
13년 전 조회 2,013
13년 전 조회 3,030
13년 전 조회 1,917
13년 전 조회 1,929
13년 전 조회 2,514
13년 전 조회 2,617
13년 전 조회 3,300
13년 전 조회 1,980
13년 전 조회 2,074
13년 전 조회 1,988
13년 전 조회 2,662
13년 전 조회 3,244
13년 전 조회 2,365
13년 전 조회 2,588
13년 전 조회 2,069
13년 전 조회 1,811
13년 전 조회 1,813
13년 전 조회 2,306
13년 전 조회 3,121
13년 전 조회 2,890
13년 전 조회 2,498
13년 전 조회 2,544
13년 전 조회 1,733
13년 전 조회 2,030
13년 전 조회 3,328
13년 전 조회 1,850
13년 전 조회 1,840
13년 전 조회 5,864
13년 전 조회 2,430