使用jquery masonry瀑布流插件后想修改它的初始布局方式该怎么设置（求大神）

Question

代码贴上：

<br> $(function(){<br> $(&#39;#container&#39;).masonry({<br> // options<br> itemSelector : &#39;.item&#39;,<br> columnWidth : 25<br> });<br> });</p> <p>var $container = $(&#39;#container&#39;);<br> $container.imagesLoaded(function(){<br> $container.masonry({<br> itemSelector : &#39;.item&#39;,<br> columnWidth : 25<br> });<br> });<br>

<style type="text/css">
    .item
    {
        width: 180px;
        margin-bottom:5px;
        float: left;
        border:1px solid #CCCCCC;
    }
    .Bigitem
    {
        border:1px solid #F00;
        width: 448px;
        float: left;
    }
</style>

都是国家的合理的的福利客服的看了好久风格的环境的符合法规的合法的很丰富的合法的活动符合法规和法国的恢复规划法规

以下是效果图：我要的效果是：被我圈起来的那个Div不被挡在后面，而且是其他Div的2倍宽度,求大神帮帮忙...

Answer 1

可以在调用masonry函数时设置isFitWidth属性为true，即可让被圈起来的Div不被挡在后面。如：

$(function(){
  $('#container').masonry({
    itemSelector: '.item',
    columnWidth: 25,
    isFitWidth: true
  });
});

而要使得被圈起来的Div是其他Div的2倍宽度，可以修改.Bigitem的宽度为其他Div的2倍宽度即可。

.Bigitem {
  border: 1px solid #F00;
  width: 360px;
  float: left;
}

注意：.Bigitem需要继承 item的样式，否则masonry插件不会识别。