检查图片是否重叠并将它们放在彼此下方答案

【问题标题】：Check if pictures overlap and put them under each other检查图片是否重叠并将它们放在彼此下方
【发布时间】：2023-03-16 06:37:01
【问题描述】：

我正在为我们公司创建的一些软件创建文档页面。现在，我希望能够在具有属性（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'。有没有办法让第二张图片距离第一张图片一定数量的像素？为了澄清，我创建了一张（相当大的）图片来准确显示我想要的内容:)

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

【问题讨论】：

标签： jquery html position css-position

【解决方案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'
                });
            }
        });
    });
});

【讨论】：

【解决方案2】：

将当前data-fig 的outerHeight() 添加到top_p value。或者这不是你想要的？以及为什么每个人都使用那一秒，您可以直接查询具有正确值的 data-fig 元素。希望这会有所帮助..

在不相关的笔记上；在这种情况下最好避免使用绝对定位，也许你应该退后一步，重新考虑一下，如果你没有把事情复杂化..

祝你好运

【讨论】：

【解决方案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 来调整图片之间的最小间距。

【讨论】：