具有多个宽度列的同位素砌体

Question

我试图使用砌体使用3种不同宽度进行此布局：

问题是最后一个元素似乎没有用，所以这就是我得到的：

这是我的代码：

$( function() {

  $('.isotope').isotope({
    itemSelector: '.item',
    masonry: {
      columnWidth: 394
    }
  });

});


#main{
    width: 1250px;
    margin: 0 auto;
    .isotope{
        max-width: 1250px;
        .item {
        float: left;
        width: 394px;
            &.width2 { 
                width: 835px;
            }
            &.width3 { 
                width: 367px; 
            }
        }
    }
}
    <div id="main">
        <div class="isotope">
            <div class="item"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/home-1.jpg"></div>
            <div class="item"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/home-2.jpg"></div>
            <div class="item"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/home-3.jpg"></div>
            <div class="item width2"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/home-4.jpg"></div>
            <div class="item width3"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/home-5.jpg"></div>
        </div>
    </div>

任何想法都存在问题？

Answer 1

1.jpg是更宽的图像，2.jgp是小的

   <div id="main">
        <div class="isotope">
            <div class="item"><img src="2.jpg"></div>
            <div class="item"><img src="2.jpg"></div>
            <div class="item"><img src="2.jpg"></div>
            <div class="item width2"><img src="1.jpg"></div>
            <div class="item width3"><img src="2.jpg"></div>
        </div>
    </div>

嘿，我只是在你的代码中拆分了类项，但它确实有效。

<style>
#main{
    width: 1250px;
    margin: 0 auto;
}

#main  
.isotope{
        max-width: 1250px;
}
.item {
        float: left;
        width: 394px;
}
.width2 { 
         width: 835px;
}
.width3 { 
        width: 367px; 
}
</style>