过滤时砌体布局不填充空间答案

【问题标题】：Masonry layout not filling space when filtered过滤时砌体布局不填充空间
【发布时间】：2016-09-08 17:58:15
【问题描述】：

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

For some reason, when some of the buttons are selected, the masonry layout floats left and stacks all items above eachother instead of filling the container.我不确定为什么会这样，在同位素上它很好：

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

Masonry 似乎没有内置此 layoutMode，我无法在此项目中使用 Isotope。

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

布局非常适合“查看全部”和“祝贺”，但不适用于“谢谢”。

编辑：我注意到“祝贺”填充空间的原因是因为 html 中的前两个网格项具有“祝贺”类。这必须以某种方式强制布局水平填充而不是垂直填充。还没有找到解决办法。

【问题讨论】：

标签： javascript jquery jquery-isotope jquery-masonry masonry

【解决方案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

【讨论】：