Question

我想我可能做错了，这非常明显......

这是我的HTML

<div id="container">
<div class="item"></div>
<div class="item w2"></div>
<div class="item"></div>
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item w2 h2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item"></div>
</div>

我在头部调用jQuery 1.7.1和modernizr，并在/ body之前调用masonry.js和下面的脚本

  $(document).ready(function() {
    $('#container').masonry({
        columnWidth: 440,
        itemSelector: '.item',
        isFitWidth: false,
        transitionDuration: 0,
    });
  });

顺便提一下，如果这有什么不同，我的CSS就在下面

#container {padding: 5px;}
.item {
    width: 220px;
    height: 160px;
    float: left;
    margin: 5px;
    background: #CCC;
  }
.item.w2 {width: 440px;}
.item.h2 { height: 280px;}

没有控制台错误，但似乎没有堆叠我想象的方式

**见这里 - http://www.rsg-media.com/masonry/test.html

我认为它看起来会像这样

http://www.code-pal.com/wp-content/uploads/2013/01/masonry-css3-jquery-fallback.jpg

......还是我是白痴？

Answer 1

在这里完成了一个片段，将w2的宽度更改为百分比，并将它们更好地移动了一下......我现在已将其重置为原始但我认为这是您的问题

＆＃13;

$(document).ready(function() {
   
    $('#container').masonry({
        columnWidth: 440,
        itemSelector: '.item',
        isFitWidth: false,
        transitionDuration: 0,
    });
  });

＆＃13;

#container {padding: 5px;}
.item {
    width: 220px;
    height: 160px;
    float: left;
    margin: 5px;
    background: #CCC;
  }
.item.w2 {width: 440px;}
.item.h2 { height: 280px;}

＆＃13;

<script src="http://desandro.github.io/masonry/jquery.masonry.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="item"></div>
<div class="item w2"></div>
<div class="item"></div>
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item w2 h2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item"></div>
</div>

＆＃13;

作为一个有masonry.js的杯子

1 个答案: