jquery - 检查图片是否重叠并将它们放在彼此下面

Question

我正在为我们公司创建的一些软件创建一个文档页面。现在，我希望能够在带有属性 (data-fig-attach) 的 span 标签中给出一段文本。 jQuery 然后读取这些标签并知道哪张图片应该放在哪里。我已经为它编写了以下代码，它的效果非常好:

Javascript(jQuery):

var fig_id = null;
$(function(){
    $("[data-fig-attach]").each(function(){
        var top_p = $(this).position().top;
        var fig_id = $(this).data().figAttach;
        $('[data-fig]').each(function(){
            var image = $(this);
            if($(this).data().fig == fig_id){
                image.css({
                    top: top_p,
                    position: 'absolute'
                });
            }
        });
    });
});

HTML:

<!-- Text part -->
<span>Lorem ipsum <span style="font-weight:bold;" data-fig-attach="1">reiciendis</span> consequatur unde quidem illum odio natus! Labore, impedit, repellendus, dolorum animi deserunt quasi dolore magnam fugit quam ad nesciunt in.</span>

<!-- Picture part -->
<div data-fig="1"><img class="art-lightbox" src="http://www.scope4mation.com/docs/files/2013/11/ESB-Overview-1.png" alt="" width="300" height="203"><br/><em>Figure 4: This is something quite different</em></div>

但是，问题是图片可能会重叠，因为我使用了 position: 'absolute'。有没有办法将第二张图片与第一张图片放置一定数量的像素？为了澄清，我创建了一个(相当大的)图片来准确显示我想要的:)

有人可以帮我解决这个问题吗？非常感谢!

Answer 1

检查新元素的建议顶部是否低于上一张图片的底部。这是一个 fiddle 来演示我在说什么:Fiddle

这是我修改过的 jQuery:

var fig_id = null;
$(function(){
    $("[data-fig-attach]").each(function(){
        var top_p = $(this).position().top;
        var fig_id = $(this).data().figAttach;
        $('[data-fig]').each(function(i, e){
            var image = $(this);
            if($(this).data().fig == fig_id){
                // Make sure we're not at the first element
                if (i != 0) {
                    // Let's check the bottom of the previous element
                    var prev_e = $('[data-fig]').eq(i-1);
                    var prev_bot = prev_e.position().top + prev_e.height();
                    // Buffer size is how far apart you want your pictures to be, in pixels
                    var buff_size = 20;
                    // Now check to see if our proposed top is overlapping the previous
                    if (top_p < prev_bot + buff_size) {
                        // Change our new top to the bottom of the previous element, plus our buffer
                        top_p = prev_bot + buff_size;   
                    }
                }
                image.css({
                    top: top_p,
                    right: 0,
                    position: 'absolute'
                });
            }
        });
    });
});