同位素砌体响应布局未排列

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'
});

您还可以检查 图像加载 ：http://imagesloaded.desandro.com/，砌体创建者的插件，它做同样的事情。