divを半ランダムに配置する、オーバーラップなし

私は、数値パラメータに従って左から右に配置する必要がある様々なフォントサイズの短いフレーズ（1-2ワード）を含むDIVを持つページを持っています。重ならないように垂直に配置する。divを半ランダムに配置する、オーバーラップなし

これは、タグクラウドのようなものだが、同様に、y軸に含まれる情報（この場合は「涼しさ」 - http://cool-wall.appspot.com）があります、私はこれらをレイアウトする必要がありますどのように

？私はこれらのスタイルの一部を抽出するためにスタイルシートを使用して、私はそれはかなり貧弱CSS（およびHTML）だということを理解

<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>

...しかし、これはだった：私は現在、このようなdiv要素の非常に厄介なシリーズを使用しています私がしたいことを（ほとんど）するために一緒にハックすることができるすべて。上記の主な問題（混乱している点を除けば）は、フォントがどのようなサイズになるのか、それが画面上にどのように表示されるのかわからないので、重複しないように配置を設定できないということです。

JavaScriptを使用すると正しく動作します。しかし、私はどこから始めるべきか分かりません。任意のヒント？

出典

2009-08-19 Richard Russell

x値はそれぞれに設定されていますが、可能な限りページの高さにしたい（最低y）重複。それほど悪くない：

1）コンテナをレンダリングします。 "position：absolute; top：0; left：-1000;"というコンテナ内の各アイテムをレンダリングします。

2）要素を1つずつ移動して必要な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個ずつ。

最初に最も重要な項目を置くと、その項目の下位項目よりも優先順位が高くなります。

出典

2009-08-20 05:55:21

これは本当にいいよね。しかし、私は上記のコードにはいくつかのバグがあると思います： "... regions [iRegion];" "regions [iReg]"でなければなりません。一番外側のforループの一番下の領域に配列を追加する必要があります：regions.push（region）; ...また、ヤフーのYUIコードが必要です。これは、

domオブジェクトには、幅が設定されている場合にタグの高さを示すjavascriptプロパティがあります。私はそれがclientHeightと呼ばれると信じています。

alert（document.getElementById（ 'myElement'）.offsetHeight）;

、それは

この

<span style="margin-top:${randomNumber}px;margin-bottom:${randomNumber}">randomtext</span> 
<span style="margin-top:${randomNumber}px;margin-bottom:${randomNumber}">randomtext</span> 
.. 
<span style="margin-top:${randomNumber}px;margin-bottom:${randomNumber}">randomtext</span>

だけのインライン表示すべての要素を持って試してみてください（もhttp://www.webdeveloper.com/forum/archive/index.php/t-121578.htmlを参照してください）ランダムな順序で出力することを試してみて、その後、それらの上にランダム余白の設定。これは、すべてサーバー側のコード（またはクライアント側が必要な場合はjavascript）で行うことができます。

出典

2009-08-19 16:48:22 Zoidberg

これをJavaScriptで計算することなく、自動的に行うことはできますか？私が知ることから、このプロパティでは、DIVで取り上げられた画面の部分を計算する関数を持つ必要があり、これを追跡したり、毎回再計算したりするのは正しいのですか？ –

ポジションは絶対にありません。私があなたがしたいことをするために見ることができる唯一の方法はJavascriptである。浮動要素によって、画面の左（または右）に浮動し、可能な限り水平方向のスペースを占有します。しかし、これは縦のスペースでは機能しません。このようなことを行うjavascriptはあまり難しくありません。これに参加している要素をループし、幅と高さを使用するだけで、配置するのに最適な場所を計算するだけです。 – Zoidberg

OK、興味深い。また、あなたは "幅が設定されている場合"これは動作すると述べた。フォントレンダリングとフォントサイズに依存するので、レンダリングされるまでの大きさはわかりません。私は幅を得るためにも同様の関数が必要であると思うので、画面の使用量を計算することができます。私は同じ方法でoffsetWidthを使用することができますか？ –

要素を絶対に配置しないでください。これは彼らがお互いの上に落ちている理由です...

出典

2009-08-19 17:54:38 Jason

OKですが、どのように配置する必要がありますか？私は、絶対的なX値と、オーバーラップを引き起こさないY値が必要です。 –

divを半ランダムに配置する、オーバーラップなし

答えて

関連する問題