Einfügen div in der nächsten Zeile, wenn Element geklickt wird

Question

Ich versuche, etwas ähnliches zu machen, was Sie in Google Bilder finden. Wenn auf ein Bild geklickt wird, erscheint ein Div mit dem Bild in der nächsten Zeile über den anderen Bildern, die unter dem angeklickten stehen.

Ich habe eine Reihe von Divs mit Float: links und Position: relativ. Sie haben unterschiedliche Breiten. Wenn ich auf ein div klicke, möchte ich ein neues div mit voller Breite in der nächsten Zeile erscheinen lassen. Die divs unter dem angeklickten sollten unter die volle Breite geschoben werden.

Ich habe versucht, dies durch die divs durch Schleifen zu tun, und die Position der divs auf den geklickt ein wie folgt vergleichen:

$(".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; 
      } 
     }); 
    }); 

Dies funktioniert nicht, und ich weiß nicht wirklich, wie ich soll mach das. Irgendwelche Tipps/Lösungen?

Answer 1

eine Lösung machen Ended up basiert auf meiner ursprünglichen Code . Dies erfordert nicht das gesamte CSS, das die andere Lösung vorgeschlagen hat. Es wurde auch vorgeschlagen, Zeilen dynamisch hinzuzufügen, dies wurde jedoch sehr kompliziert, wenn es auf die Größenänderung von Fenstern reagierte. Fühlen Sie sich frei zu antworten, wenn Sie einen Kommentar zu diesem

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

Dies erfordert eine Menge Informationen zu erklären. Also, ich würde eher vorschlagen, einen Blog-Eintrag zu diesem Thema zu lesen. Das wird Ihnen helfen.

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

Answer 3

Hier ist ein Weg, das zu erreichen. Es wird nicht Scroll-Position beibehalten, aber das wäre eine weitere einfache Lösung.

<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> 

Ich habe nur einige Styling angewendet, um die Sichtbarkeit der Änderungen zu erhöhen.

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

.row { 
    border: 1px solid green 
} 

.big-img { 
    height: 300px; 
} 

Und schließlich die JS:

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

Fiddle: https://jsfiddle.net/a5fm2dup/

Answer 4

, warum Sie nicht nur tun

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