同位素砌體響應式佈局不安排

Question

正如您所看到的，圖像行爲相當怪異，它們在瀏覽器寬度變得相當小之前不會自行排列。我究竟做錯了什麼 ？我注意到隨着窗口變小，這些項目有重疊的暗淡。

HTML

<div class="masonry container"> 
     <div class="col-sizer"></div> 
     <div class="item width2"> <img class="img-responsive" src="../images/sc/masonry-1.png" alt="a"> </div> 
     <div class="item"> <img class="img-responsive" src="../images/sc/masonry-2.png" alt="a"> </div> 
     <div class="item height2"> <img class="img-responsive" src="../images/sc/masonry-3.png" alt="a"> </div> 
     <div class="item"> <img class="img-responsive" src="../images/sc/masonry-4.png" alt="a"> </div> 
     <div class="item"> <img class="img-responsive" src="../images/sc/masonry-5.png" alt="a"> </div> 
     <div class="item"> <img class="img-responsive" src="../images/sc/masonry-6.png" alt="a"> </div> 
     <div class="item"> <img class="img-responsive" src="../images/sc/masonry-7.png" alt="a"> </div> 
     <div class="item"> <img class="img-responsive" src="../images/sc/masonry-8.png" alt="a"> </div> 
     <div class="item width2"> <img class="img-responsive" src="../images/sc/masonry-9.png" alt="a"> </div> 
    </div> 

CSS

.masonry .item { 
    float: left; 
    max-width: 25%; 
    max-height: 244px; 
} 

.masonry .item img { 
    width: 100%; 
} 

.col-sizer { 
    max-width: 25%; 
} 

.masonry .item.width2 { 
    max-width: 50%; 
} 

.masonry .item.height2 { 
    max-height: 488px; 
} 

JQUERY（在文件準備好）

$(".masonry").isotope({ 
    itemSelector: '.item', 
    masonry:{ 
     columnWidth: $(".masonry").find('.col-sizer')[0]    
    } 
}) 

$(".masonry").isotope('layout') 

Answer 1

我想這是因爲你之前的圖像加載加載砌體：砌體計算的位置您的項目沒有圖像的大小。這就是它破裂的原因。

你需要調用砌體後，像這樣：

$(window).load(function(){ // wait for all to be loaded and do the job 
$(".masonry").isotope({ 
    itemSelector : '.item', 
    layoutMode : 'masonry' 

}); 

您還可以檢查ImagesLoaded：http://imagesloaded.desandro.com/，插件通過砌體的創造者，它做同樣的事情。