1

jquery.The CSSを使用してページに要素をdiv動的に追加しています 。今、私の問題は、複数の div 要素を同時に追加すると、すべてが重なり合うことです。要素を変更せずにこれらが重複しないようにする方法はありますか?divposition : absoluteposition property

4

3 に答える 3

1

組積造プラグインをチェックしてください。これは、新しい要素がドキュメントに追加されるときにdiv要素を自動配置する動的レイアウトプラグインであり、要素の重複を防ぎます。このリンクをチェックしてください。

コンテナdivを指定するだけで、container関数を呼び出すために必要なIDを指定できます

$(".container").masonry();

コンテナ内にさらにdivを追加するときは、関数を呼び出すだけです。

var $newElems = $( newElements );
$(".container").masonry( 'appended', $newElems );
于 2012-06-11T14:05:52.447 に答える
0

要素を絶対配置として追加し、有効な上と左の値を指定しないと、要素は上と左の両方が 0 の絶対配置になります。

あなたの場合、追加するすべての要素は位置 (0,0) を取る必要があるため、それらは互いに重なり合っています。

1 つの解決策は、それぞれの位置を計算し、対応する上と左の値を css({'position' : 'absolute'}) に沿ってそれらに追加してレイアウトすることですが、ほとんどの場合、いくつかの計算が必要です。

心配しないでください。お使いのブラウザーは既にその数学を認識しており、ほとんどの場合に使用できます。そのため、'position' 'absolute' なしで div を追加してください。現在、ブラウザはそれらを適切にレイアウトしています。ブラウザーがそれらのレイアウトを完了したら、DIV を取得して現在の位置を取得し、その位置を使用して絶対位置を使用してそれらをレイアウトします。

for(var i=0; i < noOfDivs; i++){
    {
    $('#parentDiv').append('<div class="childDiv"/>');
    }
$('.childDiv').css({
    'position': 'absolute,
    'top' : $(this).position().top,
    'left' : $(this).position().left
    });

コードはテストされていません。DIV が 1 つずつ配置されている場合、再び問題が発生する可能性があります。最後から最初に反復するか、すべての位置を保存して後で適用する必要があります。jQuery が単一の DOM アクセスですべての位置を更新している場合、これは正常に機能します。

于 2012-06-11T13:17:20.997 に答える
0

上、下、左、右の css プロパティを使用して、絶対配置オブジェクトの場所を定義します。したがって、これらも動的に変更する必要があります。

例: 最初の要素には top: 0、left:0 、2 番目の要素には top: 0、left: 50 などがあります...

于 2012-06-11T13:08:43.290 に答える