在單擊元素時在下一行插入div

Question

我正在嘗試製作類似於您在Google圖片中找到的內容。點擊一張圖片時，帶有圖片的div會出現在下一行上，位於點擊圖片下的其他圖片上。

我有一組浮動的div：left和position：relative。他們有不同的寬度。當我點擊一個div時，我想要一個新的全寬div出現在下一行。點擊下的div應該在全寬下填充。

我試圖通過的div循環，從而做到這一點，的div的位置比作一個點擊這樣的：

$(".Wrapper").on("click", ".testDivs", function() { 
     var thisTop = $(this).position().top; 
     $(".testDivs").each(function(i, obj) { 
      var otherTop = $(obj).position().top; 
      if(thisTop < otherTop){ 
       $(".fullWidthDiv").insertBefore(obj); 
       return; 
      } 
     }); 
    }); 

這不工作，我真的不知道我應該如何做這個。任何提示/解決方案？

Answer 1

最終使基於我最初的代碼的解決方案。這並不要求所有的CSS都是推薦的其他解決方案。還建議動態添加行，但在響應窗口大小調整時，這變得非常複雜。隨意如果你有這個

function positionDiv() { 
    var checker = false;  
    var n;     
    var thisTop = clickedElement.position().top; 

    $(".testDivs").each(function(i, obj) { 
     var otherTop = $(obj).position().top; 

     if(thisTop < otherTop){ 
      $(".testDivs:eq(" + (i-1) + ")").after($(".fullWidthDiv")); 
      checker = true; 
      return false;   
     } 
     n = i;     
    }); 

    if (!checker) { 
     $(".testDivs:eq(" + n + ")").after($(".fullWidthDiv")); 
    } 
} 


var clickChecker = null; 
$(".wrapper").on("click", ".testDivs", function() { 
    if (clickChecker === this){ 
     $(".fullWidthDiv").hide(); 
     clickChecker = null; 
    } else { 
     $(".fullWidthDiv").show(); 
     clickChecker = this; 
    } 

    clickedElement = $(this); 

    positionDiv(); 
}); 

window.onresize = function(event) { 
    if(clickedElement != null) { 
     $(".tagTextWrapper").hide(); 
     positionDiv(); 
     $(".tagTextWrapper").show(); 
    } 
} 

Answer 2

這需要大量的信息來解釋。所以我寧願建議閱讀關於這個主題的博客文章。希望這會對你有所幫助。

https://www.sitepoint.com/recreating-google-images-search-layout-css/

Answer 3

這是實現該目的的一種方法。它不會保持滾動位置，但這將是另一個簡單的解決方法。

<div class="wrapper"> 
    <div class="row1 row"> 
    <div class="img1 img"></div> 
    <div class="img2 img"></div> 
    <div class="img3 img"></div> 
    </div> 
    <div class="row2 row"> 
    <div class="img1 img"></div> 
    <div class="img2 img"></div> 
    <div class="img3 img"></div> 
    </div> 
    <div class="row3 row"> 
    <div class="img1 img"></div> 
    <div class="img2 img"></div> 
    <div class="img3 img"></div> 
    </div> 
</div> 

我只適用的變化一些造型TI增加知名度。

.img { 
    width: 32%; 
    height: 100px; 
    background-color: #ccc; 
    display: inline-block; 
} 

.row { 
    border: 1px solid green 
} 

.big-img { 
    height: 300px; 
} 

最後的JS：

$('.img').click(function() { 
    var expandedImg = '<div class="big-img"></div>'; 
    $('.big-img').remove(); 
    $(this).parent().append(expandedImg); 
}) 

小提琴：https://jsfiddle.net/a5fm2dup/

Answer 4

你爲什麼不只是做

$(".Wrapper").on("click", ".testDivs", function() { 
    $(this).after($(".fullWidthDiv")); 
});