Javascript 单击元素时在下一行插入div

我正在尝试做一些类似于你在谷歌图片中找到的东西。单击图片时，带有该图像的div将显示在单击图片下的其他图像的下一行

我有一组div，float:left和position:relative。它们有不同的宽度。当我点击一个div时，我想在下一行显示一个新的全宽div。单击的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;
            }
        });
    });

$（.Wrapper”）。在（“单击”，“.testDivs”，函数（）上{
var thisTop=$（this）.position（）.top；
$（“.testDivs”）。每个（函数（i，obj）{
var otherTop=$（obj）.position（）.top；
如果（此顶部<其他顶部）{
$（.fullWidthDiv”）.insertBefore（obj）；
返回；
}
});
});

---

这不管用，我真的不知道该怎么做。有什么提示/解决方案吗？

这需要很多信息来解释。所以我建议你读一篇关于这个话题的博文，希望这能对你有所帮助

---

这里有一种方法可以实现这一点。它将不会保持滚动位置，但这将是另一个简单的修复

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

最后是JS：

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

$（'.img'）。单击（函数（）{
var expandedImg=“”；
$（'.big img'）.remove（）；
$（this.parent（）.append（expandedImg）；
})

小提琴：

你为什么不做呢

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

---

最终根据我的初始代码制定了解决方案。这并不需要postet建议的其他解决方案的所有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();
    }
}

函数位置div（）{
var checker=false；
var n；
var thisTop=clickedElement.position（）.top；
$（“.testDivs”）。每个（函数（i，obj）{
var otherTop=$（obj）.position（）.top；
如果（此顶部<其他顶部）{
$（“.testDivs:eq（“+（i-1）+”）。在（$（“.fullWidthDiv”））之后；
checker=true；
返回false；
}
n=i；
});
如果（！checker）{
$（“.testDivs:eq（“+n+”））。在（$（“.fullWidthDiv”））之后；
}
}
var clickChecker=null；
$（.wrapper”）。在（“单击“，.testDivs”，函数（）上{
如果（单击检查程序===此）{
$（.fullWidthDiv”）.hide（）；
clickChecker=null；
}否则{
$（“.fullWidthDiv”）.show（）；
单击Checker=this；
}
单击元素=$（此项）；
positionDiv（）；
});
window.onresize=函数（事件）{
如果（clickedElement！=null）{
$（“.tagTextWrapper”）.hide（）；
positionDiv（）；
$（“.tagTextWrapper”）.show（）；
}
}

div是动态添加的，并且每行都没有父div，因此这对我不起作用：/Hm，如果您想使用此解决方案，可以将它们动态添加到行中。谢谢，这非常完美：）如果没有更聪明的答案出现，请将其作为解决方案

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