Question

我正在为我们公司创建的某些软件创建文档页面。现在，我希望能够在span标记中为一段文本提供一个属性（data-fig-attach）。然后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'。有没有办法将第二张图片与第一张图片相隔一定数量的像素？为了澄清，我创建了一个（相当大的）图片来准确显示我想要的东西:)

enter image description here

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

Answer 1

检查新元素的建议顶部是否低于上一张图片的底部。这是演示我正在谈论的内容的小提琴：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'
                });
            }
        });
    });
});

Answer 2

将当前outerHeight()的{{1}}添加到data-fig。或者那不是你想要的？为什么每次使用第二个，你可以直接查询具有正确值的data-fig元素。希望这会有所帮助..

不相关的说明;在这种情况下避免绝对定位可能更好，如果你没有过于复杂的话，也许你应该退后一步重新思考..

祝你好运

Answer 3

以下是演示：http://jsfiddle.net/thirtydot/LP5Ta/

JavaScript的：

$(document).ready(function() {
    $(window).on('resize', function() {
        $("[data-fig-attach]").each(function() {
            var top_p = $(this).position().top;
            var fig_id = $(this).data('fig-attach');
            var image = $('[data-fig=' + fig_id + ']');
            image.css({
                top: top_p,
                position: 'absolute'
            });
        });
        $('[data-fig]').slice(1).each(function() {
            var $this = $(this);
            var $prev = $this.prev();
            var h1 = $prev.outerHeight();
            var h2 = $this.outerHeight();
            var t1 = parseInt($prev.css('top')) + h1;
            var t2 = parseInt($this.css('top')) + h2;
            if (t2 - t1 < h2) {
                $(this).css('top', t1);
            }
        });
    }).trigger('resize');
});

这也会在调整窗口大小时调整位置。您可以通过调整CSS来调整图像之间的最小间隙。

检查图片是否重叠并将它们放在一起

3 个答案: