调整大小时如何包装然后解开div?

问题描述：

我已经尝试过if else语句，它应该相当简单，但是在调整到650px以上的大小之后，我似乎无法反转换行.

I've tried if else statements and it should be fairly simple but I cant seem to reverse the wrap after resizing above 650px.

基本上，我正在尝试将窗口宽度小于650的框包装成div，然后将其调整为650px以上的尺寸后将其拆开.

Basically, I'm trying to get the boxes wrapped in a div when window is below 650 width and then unwrapped after resizing above 650px.

我该怎么做?

$(window).resize(function() {
  if ($(window).width() < 650)
    $('.box').wrap("<div class='boxwrap'><div/>")

});

$(window).resize(function() {
  if ($(window).width() > 650)
    $('.box').unwrap("<div class='boxwrap'><div/>")

});

  #cat-area {
  width: 100%;
  display: inline-block;
  text-align: center;
  background-color: red;
}

#cat-container {
  background-color: yellow;
  width: 92.5%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.box {
  display: inline-block;
  width: 20%;
  height: 20%;
  max-height: 300px;
  max-width: 300px;
  min-height: 100px;
  min-width: 100px;
  padding: 1%;
  background-color: #d7d7d7;
}

@media only screen and (max-width: 650px) {
  #cat-area {
    width: 100%;
    display: block;
    text-align: center;
    background-color: red;
  }
  #cat-container {
    background-color: blue;
    width: 92.5%;
    display: block;
  }
  .box {
    position: relative;
    display: block;
    margin: 4px 0px;
  }
  .boxwrap {
    background-color: #d7d7d7;
    width: 100%;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="cat-area">
  <div id="cat-container">
    <img class="box" src="http://via.placeholder.com/200x200">
    <img class="box" src="http://via.placeholder.com/200x200">
    <img class="box" src="http://via.placeholder.com/200x200">
    <img class="box" src="http://via.placeholder.com/200x200">

  </div>
</div>

答

我自己也遇到了类似的问题.这是如何执行此操作的简单演示:

I have faced a similar problem to this myself. Here is a simple demonstration of how you can do this:

请注意最初的页面宽度
在调整大小时，短暂的超时(调整大小停止后)之后，请注意新的宽度
比较这两个值以确定我们是否应该采取行动
重置宽度以与新宽度进行比较，以备下一次调整大小时使用

运行以下代码段，将其展开至全屏，然后调整浏览器大小以使其正常运行.

Run the following snippet, expand it to full screen, and adjust the browser size to see it working.

$(function() {
  var resizeTimer;
  var initialSize = $(window).width();
  $(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
      var delayedSize = $(window).width();
      // if we resize the page but we don't cross the 650 threshold, do nothing
      if ((initialSize > 650 && delayedSize > 650) || (initialSize < 650 && delayedSize < 650)) {
        return
      }
      // else if we resize the page and cross the 650 threshold, do something
      else {
        if (delayedSize > 650) {
          $('#cat-container').unwrap('#cat-area');
        } else if (delayedSize <= 650) {
          $('#cat-container').wrap('<div id="cat-area"></div>');
        }
      }

      initialSize = delayedSize;
    }, 250);
  });
});

#cat-area {
  background-color: gold;
  padding: 10px;
}
#cat-container {
  background-color: slategray;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cat-area">
  <div id="cat-container">
    <img class="box" src="http://via.placeholder.com/200x200">
    <img class="box" src="http://via.placeholder.com/200x200">
    <img class="box" src="http://via.placeholder.com/200x200">
    <img class="box" src="http://via.placeholder.com/200x200">
  </div>
</div>

调整大小时如何包装然后解开div?

相关推荐