如何将以前的图像放在展开图像下方

Question

我有一个包含16幅图像的网页。每个图像占用容器宽度的49.7％。所以基本上我有2列和8行。我写了一些jQuery代码，将您点击的图像展开为99.5％的宽度，以占用2列。

这很好，但是当我点击第二列上的图像时，它被放置在第一列图像的下方。我不希望发生这种情况，我希望图像位于第一列图像的顶部。希望这是有道理的。我将在下面提供我的代码。

$(document).ready(function() { 
 
    $('img').on('click', function() { 
 
    $(this).toggleClass('imgwidth'); 
 
    }); 
 
});

img { 
 
    width: 49.7%; 
 
    display: inline; 
 
    vertical-align: top; 
 
    margin-top: 3px; 
 
    top: 100px; 
 
} 
 
.imgwidth { 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<main> 
 
    <div> 
 
    <img src="http://placehold.it/8x1" /> 
 
    <img src="http://placehold.it/8x1" /> 
 
    <img src="http://placehold.it/8x1" /> 
 
    <img src="http://placehold.it/8x1" /> 
 
    <img src="http://placehold.it/8x1" /> 
 
    <img src="http://placehold.it/8x1" /> 
 
    <img src="http://placehold.it/8x1" /> 
 
    <img src="http://placehold.it/8x1" /> 
 
    <img src="http://placehold.it/8x1" /> 
 
    <img src="http://placehold.it/8x1" /> 
 
    <img src="http://placehold.it/8x1" /> 
 
    <img src="http://placehold.it/8x1" /> 
 
    <img src="http://placehold.it/8x1" /> 
 
    <img src="http://placehold.it/8x1" /> 
 
    <img src="http://placehold.it/8x1" /> 
 
    <img src="http://placehold.it/8x1" /> 
 
    </div> 
 
</main>

Fiddle demo

Answer 1

嘛。这不完整，但它会给你一个起点，并表明这实际上并不容易。

请首先检查FIDDLE。

在JS代码中，我使用了一个moved数据attr来定义它是否是移动的项目。为了您的愿望，我们要在前一个项目之前的第二列移动项目。进一步的解释将作为评论在代码中。

$('img').on('click', function() { 
    var ind = $(this).index(); 
    if ($(this).data("moved")) { 
    // check if this is moved. If it is that means it was pushed back 
    // before previous item so we're gonna move it after again 
    $(this).data("moved",false).insertAfter($(this).next("img")); 
    } else if (ind % 2 == 1 && !$(this).prev("img").hasClass("imgwidth") && !$(this).hasClass("imgwidth")) { 
    // check if the item is on 2nd column by % calculation 
    // if it is and previous item isn't expanded and it is also not expanded yet 
    // this means we're gonna put this one before previous one 
    $(this).data("moved",true).insertBefore($(this).prev("img")); 
    } else if (ind % 2 == 1 && $(this).prev("img").data("moved") && !$(this).hasClass("imgwidth")) { 
    // if it's on the 2nd column and previous one has data moved and 
    // this one is not expanded yet 
    // that means this one was actually before in the first place so 
    // we're gonna put it back and remove data on the next one 
    $(this).insertBefore($(this).prev("img")); 
    $(this).prev("img").data("moved", false) 
    } else if (ind % 2 == 0 && $(this).next("img").has("imgwidth") && $(this).hasClass("imgwidth")) { 
    // if it's on the 1st column and next img is expanded and 
    // this one is also expanded, next one needs to be pushed before this 
    // and have data true 
    $(this).insertAfter($(this).next("img")); 
    $(this).prev("img").data("moved", true) 
    } 
    $(this).toggleClass('imgwidth'); 
}); 

它可能有一些失败，但就像我说这是一个起点。