Question

我正在使用Masonry来实现不同宽度的布局。大多数都具有相同的高度，如果没有，其想法是他们计算出彼此相邻的正确排列。

你可以在这里查看小提琴： 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>

（在Stack Overflow上插入的代码似乎没有正确布局，我的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'

砌体：有div布局的问题

2 个答案: