如何使以前的图像低于展开的图像

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 数据属性来定义它是否是移动的项目。为了您的愿望，我们将把第 2 列的项目移到前一个项目之前。进一步的解释将在代码中作为 cmets。

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

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