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

Masonry layout not filling space when filtered

本文关键字：过滤 空间 填充 布局      更新时间：2023-09-26

我做了一个砌体布局，点击过滤。

由于某些原因，当选择某些按钮时，砌体布局向左浮动，并将所有项目堆叠在一起，而不是填充容器。我不确定为什么会发生这种情况，在同位素上是可以的:

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

砌体似乎没有这个layoutMode内置，我不能使用同位素这个项目。

我不知道我哪里错了，这里是一个codependency:http://codepen.io/H0BB5/pen/ORVBzm

"查看所有"answers"祝贺"的布局是完美的，但不适合"谢谢"。

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

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

<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

相关文章：