如何在調整大小時打包然後展開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>