Question

我使用jquery在页面中动态添加div等元素。div CSS为position : absolute。现在我的问题是当我同时添加多个div元素时而不是它们彼此重叠。有没有什么方法可以不改变我的元素position property这些不重叠？

Answer 1

查看砌体插件。它是动态布局插件，自动排列div元素，因为在文档中添加了新元素，它可以防止元素的重叠。看看这个link.

只需指定容器div，让它标识为container，您需要调用函数

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

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

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

Answer 2

您可以使用top，bottom，left，right css属性定义绝对定位对象的位置。所以你必须动态地改变它们。

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

Answer 3

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

在你的情况下，你要添加的所有元素应该是位置（0,0），所以它们在一个上面重叠。

一种解决方案是计算每个位置并使用相应的顶部和左侧值沿着西斯css（{'position'：'absolute'}）对它们进行布局，但在大多数情况下需要一些数学。

别担心，您的浏览器已经知道数学，并且您可以在大多数情况下使用它，因此添加没有'position''绝对'的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访问中的所有位置，这将正常工作。

通过jquery动态添加div

3 个答案: