Divs를 겹치지 않고 세미 랜덤하게 배치

Question

숫자 매개 변수에 따라 왼쪽에서 오른쪽으로 배치해야하는 다양한 글꼴 크기의 짧은 문구 (1-2 단어)를 포함하는 DIV가있는 페이지가 있습니다. 수직으로 겹치지 않도록한다.

그것은 태그 구름처럼,하지만 y 축에 포함 된 정보는 ("차가움"는이 경우 - http://cool-wall.appspot.com)뿐만 아니라 거기에

나는이를 배치하는 방법?

<div style="position:absolute; top:150px;left:10px;right:10px;bottom:10px"> 

<!-- then, repeated, with different top, left and font-size values --> 

    <div style="align:center; margin:0; border:none; padding:0; float:left; visibility:visible; position:absolute; top:21%; left:56%; font-size:11px"> 
    <div style="margin-top:0%; margin-right:50%; margin-bottom:0%; margin-left:-50%;"> 
     <a href="foo"><span style="display:inline"> &larr; </span></a> 
     <a href="bar"><span style="display:inline"> Buzz </span></a> 
     <span style="display:inline"> &rarr; </span> 
    </div> 
    </div> 

    <!-- of course, followed by a close div --> 

</div> 

내가 그 스타일의 일부를 추출하는 스타일 시트를 사용하고, 나는 그것이 매우 가난한 CSS (및 HTML)의 실현 ...하지만이 있었다 : 나는 현재 같이하는 div 매우 지저분한 시리즈를 사용하고 있습니다 내가하고 싶은 것을 (거의) 해킹 할 수있는 모든 것. 위의 주요 문제점 (혼란스러운 점을 제외하고)은 폰트의 크기가 무엇인지, 화면 상에 어떻게 표시 될지 모르기 때문에 포지셔닝을 겹치지 않도록 설정할 수 없다는 것입니다.

자바 스크립트를 사용하면 편리합니다. 그러나 나는 어디에서 시작해야할지 모른다. 어떤 팁?

Answer 1

x 값은 각 하나에 설정되어 있습니다, 당신은 가능한 한 페이지에서 높이가되고 싶습니다 (최저 y). 중복. 너무 나쁘지 않다 :

1) 컨테이너를 렌더링 - 위치 : 상대적; "position : absolute; top : 0; left : -1000;"을 사용하여 컨테이너 안의 각 항목을 렌더링하고 화면에서 모두 그립니다.

2) 하나씩, 요소를 x 좌표와 y = 0으로 필요에 따라 이동합니다.

var regions = []; 
for(var i = 0; i < items.length; i++){ 
    var item = items[i]; 

    item.style.x = getX(item); // however you get this... 
    var region = YAHOO.util.Dom.getRegion(item); 
    var startingTop = region.top; 
    for(var iReg = 0; iReg < regions.length; iReg++){ 
    var existingRegion = regions[iRegion]; 
    while(region.intersect(existingRegion)){ 
     region.top++; 
     region.bottom++; 
    } 
    item.style.y = (region.top - startingTop) + 'px'; 
    } 
} 

그것은 단지 지역을 업데이트하는 것이 중요하고 실제로 DOM 노드를 이동하지 : 그것은 않는 경우,이 충돌하지 않을 때까지 하나 개의 픽셀을 아래로 이동, 그것은 충돌 있는지 확인하기 위해 이전의 모든 렌더링 항목을 확인 성능상의 이유로 한 번에 1 개씩.

가장 중요한 항목을 먼저 넣으면 아래 항목보다 우선 순위가 높습니다.

최근 질문

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 관련 문제

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.