砌体:与div布局有问题

Question

我使用砖石来实现不同宽度的布局。大多数都有相同的高度，如果没有，他们的想法是，他们计算正确地排在彼此旁边。

您可以在这里查看小提琴：http://jsfiddle.net/hLangx3g/

这是我的密码：

// Javascript
var container = document.querySelector('#masonry-grid');
var msnry = new Masonry( container, {
  // options
  itemSelector: '.masonry',
  columnWidth: 0
});

#masonry-grid {width:80%; margin:0 auto;}
.masonry {background:#069;}
.masonry-3 {width:25%; padding-bottom:25%; background:#0C6}
.masonry-4 {width:33.3%; padding-bottom:33.3%; background:#9C0}
.masonry-6 {width:50%; padding-bottom:50%; background:#C36}
.masonry-8 {width:66.6%; padding-bottom:33.3%; background:#FC9}
.masonry-12 {width:100%; padding-bottom:33.3%; background:#036}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="masonry-grid">
  <div class="masonry masonry-4"></div>
  <div class="masonry masonry-8"></div>
  <div class="masonry masonry-3"></div>
  <div class="masonry masonry-3"></div>
  <div class="masonry masonry-6"></div>
  <div class="masonry masonry-3"></div>
  <div class="masonry masonry-3"></div>
  <div class="masonry masonry-12"></div>
  <div class="masonry masonry-12"></div>
</div>

​

(插入到堆栈溢出上的代码似乎没有正确的布局，到目前为止，我的jsfiddle就在这里)。

你会看到有四个绿色的(不是石灰的)方形的宽度和高度相同。我希望这四个盒子自己坐在一个正方形上，所以每条线上都有两个，大的粉红色盒子坐在四个盒子的右边。那样的话，我们就可以一视同仁。

我怎样才能让四个绿色方块坐在2x2和粉红色方格右边？我绞尽脑汁想弄清楚我做错了什么。

提前谢谢。

Answer 1

你需要一个非零的columnWidth。正在发生的事情是，Masonry正在寻找该变量，并且是0，它使用的第一个元素的宽度与itemSelector (您的masonry-4对象)匹配。您需要设置它(将其设置为1，对于您尝试使用不同宽度所做的操作是最好的)。

JSFiddle：http://jsfiddle.net/hLangx3g/1/

Answer 2

如果我明白的话，这就是你想要的，对吧？

http://jsfiddle.net/OxyDesign/4n73om6z/

我补充说：

HTML：<div class="column"></div>

CSS：.column{width:8.3333333333%;}

我改变了：

JS：columnWidth: '.column'