Question

我制作了一个可以点击过滤的砌体布局。

出于某种原因，当选择了某些按钮时，砌体布局向左浮动并将所有项目堆叠在彼此之上，而不是填充容器。我不确定为什么会发生这种情况，对于同位素来说它很好：

$grid.isotope({ layoutMode: 'masonry' })

Masonry似乎没有内置这个layoutMode，我不能在这个项目中使用Isotope。

我不确定我哪里出错，这是一个codepen： http://codepen.io/H0BB5/pen/ORVBzm

布局非常适合'全部观看'和'祝贺'，但不适合'谢谢'。

修改的：我注意到'祝贺'填充空间的原因是因为html中的前两个网格项目有'祝贺'类。这必须以某种方式强制布局水平填充而不是垂直填充。仍然没有找到解决方案。

Answer 1

我最终搞清楚了问题。如果其他人有同样的问题，我通过进一步阅读文档找到了我的解决方案。

<div class="grid">
  <!-- .grid-sizer empty element, only used for element sizing -->
  <div class="grid-sizer"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  ...
</div>

/* fluid 5 columns */
.grid-sizer,
.grid-item { width: 20%; }
/* 2 columns wide */
.grid-item--width2 { width: 40%; }
// use outer width of grid-sizer for columnWidth
columnWidth: '.grid-sizer',
itemSelector: '.grid-item',
percentPosition: true

现在正在使用笔：http://codepen.io/H0BB5/pen/ORVBzm

过滤后的砌体布局不填充空间

1 个答案: