Question

我正在尝试制作与您在Google图片中找到的内容类似的内容。单击图片时，带有图像的div将出现在下一行上的点击下面的其他图像上。

我有一组带有float的div：left和position：relative。它们有不同的宽度。当我点击一个div我想要一个新的全宽div出现在下一行。点击的div下面的div应该在全宽度下划分。

我尝试通过循环遍历div并将div的位置与点击的div比较如下：

:hover

这不起作用，我真的不知道该怎么做。任何提示/解决方案？

Answer 1

这需要大量的信息来解释。所以我宁愿建议阅读关于这个主题的博客文章。希望这对你有帮助。

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

Answer 2

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

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

我只应用了一些样式，增加了变化的可见性。

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

你为什么不这样做

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

Answer 4

根据我的初始代码结束制作解决方案。这并不要求所有CSS提供postet建议的其他解决方案。还建议动态添加行，但是当使其响应窗口大小调整时，这变得非常复杂。如果您对此有任何意见，请随时回复

 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

4 个答案: