修改jquery重置爲瀏覽器窗口將重新大小

我有一個類似divs的響應式佈局，我正在應用jquery，因此所有的div匹配更多內容的高度。但是，如果瀏覽器窗口要重新調整大小，所有div保持不變，因爲頁面加載時會使文本脫離div。有沒有辦法以某種方式繼續運行JQuery每次用戶調整瀏覽器窗口？修改jquery重置爲瀏覽器窗口將重新大小

爲了說明我正在努力實現的目標，讓我的div在文本內容和屬性寬度上表現爲（在瀏覽器窗口rezise上）爲普通div。身高：自動;唯一的區別是所有的div都會匹配高度較高的div的高度。

這裏是我有什麼鏈接：http://as.sjsu.edu/cf/vaishak/equalizeTest/index.html

這裏是Jquery的，我本來要得到最大高度：

<script> 
jQuery(function(){ 
var maxHeight = 0; 
$(".box").each(function(){ 
    if ($(this).height() > maxHeight) { maxHeight = $(this).height(); } 
}); 
$(".box").height(maxHeight); 
}); 
</script>

下面是更新後的版本仍然無法正常工作當窗口調整大小時。

$(document).ready(function(){ 
    $(window).resize(function(event) { 
     resizeDiv(); 
    }); 
    $(document).ready(function(){ 
     resizeDiv(); 
    }); 
    function resizeDiv(){ 
     var maxHeight = 0; 
     $(".box").each(function(){ 
      if ($(this).height() > maxHeight) { maxHeight = $(this).height(); } 
     }); 
     $(".box").height(maxHeight); 
    } 
    });

任何幫助將不勝感激！

來源

2013-05-02 irm

是否有一個特定的原因，你使用JavaScript來使元素高度相等，而不是純粹的CSS？ – cimmanon 2013-05-02 18:40:07

我不知道如何用純CSS做到這一點，我的佈局是響應式的，所以我不能用div下的bg img來僞造它。 – irm 2013-05-02 19:21:09

你可以忘掉使用JavaScript，這和使用純CSS：

http://cssdeck.com/labs/ygq5x6k3

<div class="container"> 
    <div>First</div> 
    <div>Second</div> 
</div> 

.container { 
    display: table; /* optional */ 
    width: 100%; /* optional */ 
} 

.container div { 
    display: table-cell; 
}

它的彈性，並且與許多「欄目工作「如你所需。由於其純CSS，您甚至可以通過媒體查詢爲移動設備禁用它。

來源

2013-05-02 20:08:00 cimmanon

嘿，非常感謝。這似乎工作，但有沒有辦法在divs之間有利潤。這是我想要完成的：http://as.sjsu.edu/cf/vaishak/equalizeTest/index.html – irm 2013-05-02 20:38:24

當然：http://cssdeck.com/labs/ogu17bqd。您需要使用負邊距來沿着外邊緣抵消它們。 – cimmanon 2013-05-02 20:41:26

我用相同顏色的背景邊框假邊緣。 – irm 2013-05-02 20:48:05

當然，你可以使用jQuery的.resize()事件記錄在這裏：http://api.jquery.com/resize/

例如：

$(window).resize(function() { // YOUR CODE HERE });

然後在每次調整窗口大小時，該代碼將運行。

這是一個JSFiddle example，它演示了代碼的運行時間。

來源

2013-05-02 18:31:32 NibblyPig

這是事件監聽器的用途。你可以把你的代碼放到一個函數中，比如說normalizeBoxHeight()，然後在瀏覽器調整大小時（並且在開始加載時）調用它。

是這樣的：

jQuery(function(){ 

    var normalizeBoxHeight = function(){ 
     var maxHeight = 0; 
     $(".box").each(function(){ 
      if ($(this).height() > maxHeight) { maxHeight = $(this).height(); } 
     }); 
     $(".box").height(maxHeight); 
    } 

    $(window).resize(normalizeBoxHeight); 
    normalizeBoxHeight(); 

});

來源

2013-05-02 18:33:32 idrumgood

事實上，我仍然沒有得到我想要完成的任務，並且在調整窗口大小後文本會熄滅。：/ – irm 2013-05-02 19:17:14

嗯，我會告訴你，這段代碼完成了你要求的任務（最初觸發和調整窗口大小後）。如果它沒有產生預期的效果，那麼它與你的標記/ CSS或其他js有關。隨意提供一些，看看我們是否無法進一步排除故障。 – idrumgood 2013-05-02 19:25:16

你可能是可行的，而且是別的。這裏是鏈接：http://as.sjsu.edu/cf/vaishak/equalizeTest/index.html感謝您的幫助。 – irm 2013-05-02 20:15:59

修改jquery重置爲瀏覽器窗口將重新大小

回答

相關問題