砌體不重新加載瀏覽器中的元素調整大小

Question

我在我的網站中實現了砌體，因爲我使用的是網格系統，它似乎是使網格正常工作的最佳和最簡單的解決方案。這一切偉大的工作，直到我加入

isFitWidth = true

聲明。它在集中網格方面起作用，但是當我調整瀏覽器大小時，網格不再重新加載。之前，當我讓瀏覽器變小時，網格元素相互移動，現在只有當我手動重新加載頁面，或者使瀏覽器變大，而不是變小時才重新加載。

任何想法爲什麼？

JQUERY

<script> 
$(document).ready(function() { 

var $container = $('#dash_content'); 
// initialize 
$container.masonry({ 
    columnWidth: 300, 
    itemSelector: '.dash_content_ele', 
    isFitWidth: true, 
    gutter: 35, 
    isResizable: true 
}); 
    }); 
</script> 

CSS

#dash_content{ 

    width: 100%; 
    margin-left: auto; 
    margin-right: auto; 
    min-height: 1000px; 
    height: auto; 
    background-color: #aaaaaa; 

} 



.dash_content_ele{ 
    width: 300px; 
    min-height: 200px; 
    background-color: #ffffff; 
    border-radius: 6px; 
    height: auto; 

    margin-bottom: 25px; 
    float: left; 
    box-shadow: 0px 1px 2px #555555; 
    position: relative; 
    background-image: url(../images/dashboard/dash_ele_background.png); 
    background-repeat: repeat; 
} 
.dash_content_ele.w2{ 
    width:635px; 
} 

HTML

<div id="dash_content"> 

    <div class="dash_content_ele"> 

     </div><!--end dash_content_ele-->    

</div><!--end dash_content--> 

Answer 1

你需要改變你的.dash_content_ele CSS使用百分比寬度而不是固定寬度（width: 300px;）。

例

.dash_content_ele { 
    width: 20%; 
} 

- 編輯 -

至於建議的亞肯，你可以在一個窗口大小調整函數中調用砌築重裝。

$(window).resize(function() { 
    $('#container').masonry('reloadItems'); 
});