javascript - 通过jquery动态添加div

Question

我正在div使用 jquery 在页面中动态添加元素div。CSS 是position : absolute 。现在我的问题是当我同时添加超过 1 个 div 元素时，它们相互重叠。有什么办法可以在不改变我的元素的position property情况下不重叠？

Answer 1

查看砌体插件。它是动态布局插件，可在新元素添加到文档时自动排列 div 元素，防止元素重叠。看看这个链接。

只需指定容器 div 让它与container您需要调用函数的 id

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

然后当您在容器中添加更多 div 时，您只需要调用该函数

var $newElems = $( newElements );
$(".container").masonry( 'appended', $newElems );

Answer 2

您使用顶部、底部、左侧、右侧 css 属性定义绝对定位对象的位置。所以你也必须动态地改变这些。

例如：第一个元素有 top: 0, left:0 ，第二个 top: 0, left: 50 等等......

Answer 3

当您将元素添加为绝对定位并且没有提供有效的顶部和左侧值时，该元素将被定位到绝对位置，顶部和左侧都为 0。

在您的情况下，您添加的所有元素都应该占据位置 (0,0)，因此它们彼此重叠。

一种解决方案是计算每个位置的位置，并使用沿 sith css({'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 被一个一个定位，它应该再次导致问题，您应该从最后一个到第一个迭代它们或保存所有位置并稍后应用它们。如果 jQuery 更新单个 DOM 访问中的所有位置，这将正常工作。