2014-01-29 46 views
2

我正在为我们公司创建的某些软件创建文档页面。现在,我希望能够在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

有人可以帮助我解决这个问题说明了什么?非常感激!

回答

2

检查,看是否提出顶新元素低于前一张照片的底部。这里有一个小提琴来证明什么,我说什么: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' 
       }); 
      } 
     }); 
    }); 
}); 
+0

这样做完成的技巧,谢谢! :D –

+0

很高兴能帮到你! –

1

将当前data-figouterHeight()添加到top_p value。或者那不是你想要的?为什么每次都使用第二个,你可以直接用正确的值查询data-fig元素。希望这有助于...

在一个不相关的说明;它可能会更好,以避免这种情况下绝对定位,也许你应该退一步,重新考虑,如果你没有过于复杂的东西..

好运

0

这里有一个演示: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来调整图像之间的最小差距。

相关问题