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

【问题标题】：Isotope Masonry with multiple widths columns具有多宽度列的同位素砌体
【发布时间】：2014-10-22 16:49:48
【问题描述】：

我正在尝试使用具有 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>

有什么想法吗？

【问题讨论】：

我用的是 Less，为什么？
less 在浏览器中不起作用，除非您已将其编译为 css。
是的，它已编译...我只是将未编译的版本放在这里。没有看到这样做的问题

标签： javascript html css plugins

【解决方案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>

【讨论】：