同位素砌体响应式布局不安排

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/，插件通过砌体的创造者，它做同样的事情。