檢查圖片是否重疊並將它們放在一起

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'。有沒有辦法將第二張圖片放在距離第一張圖片一定量的像素上？爲了澄清，我創建了一個（相當大的）圖片正是我想要的:)

有人可以幫助我解決這個問題說明了什麼？非常感激！

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

將當前data-fig的outerHeight()添加到top_p value。或者那不是你想要的？爲什麼每次都使用第二個，你可以直接用正確的值查詢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來調整圖像之間的最小差距。