如何在调整大小时打包然后展开div？

Question

我试过如果其他语句，它应该是相当简单的，但似乎无法逆转重新调整大小650px以上的换行。任何帮助将非常感激！！！

基要IM当试图窗口下方为650宽度GET包裹在一个DIV的复选框，然后解开后调整大小高于650像素

HTML：

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

CSS：

#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%; 
} 

JQUERY：

$(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/>") 

    }); 

Answer 1

我自己也遇到了类似的问题。这里是你如何能做到这一个简单的例子：

1. 注意页面的宽度最初
2. 在调整大小，短暂超时（调整大小已停止后），请注意新的宽度
3. 比较两个值，以确定我们是否应该采取行动或不
4. 重置我们的宽度比较新的宽度，我们调整

运行下面的代码片段到下一次，它扩大到全屏，并调整兄弟wser大小看它工作。

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