将固定尺寸的物品放到固定尺寸的父级中，并丢弃不适合的物品

Question

我有一个固定大小的容器和一个固定大小的项目列表（每个项目可以有不同的固定大小）。我需要能够在固定大小的容器中容纳最大数量的物品，而将不适合的物品排除在外。

这是我到目前为止所拥有的：

我尝试使用Isotope，这种类型的东西在使用尽可能多的空间时能胜任工作，但它可以容纳一切，从而改变了容器尺寸，这不是理想的最终结果。

在理​​想的世界中

我想知道如何获取数组中不适合的项目的列表，因此我可以通过遍历该数组将其从容器中删除，并显示不适合容器自身的项目。感谢所有帮助。

到目前为止，我已经尝试了以下方法：

删除开始剪切容器的项目

$('.grillitem', '.grill').filter(function() {
   return $('.grillitem').offset().top + $('.grillitem').height() < $(this).offset().top + $(this).height();
}).hide();

但是，如果项目是inline-block或block而不是float:left;，则此方法不起作用。这意味着我将无法以最大化空间使用的方式来使用它。

使用同位素最大程度地利用空间

var grid = document.querySelector('.grill');
var iso = new Isotope( grid, {
  // options...
  itemSelector: '.grillitem',
  percentPosition: true,
  masonry: {
    // set to the element
    columnWidth: '.grillitem'
  }
});

这样可以最大程度地利用空间。但是，它不遵守容器的高度，因此会覆盖该高度（即使我在CSS中为容器的高度设置了!important标志），也没有办法排除不适合其文档的项目。我希望将上述两种处理方式结合起来，但是我排除不适合的项目的方法不适用于position:absolute的项目，Isotope使它们成为了项目。

换句话说，我完全迷路了。