Javascript在流体网格中的当前行下面插入元素

Question

小提琴 - http://jsfiddle.net/bACZd/

我正在用简单的JS构建一个简单的网格布局。网格现在包含16个“瓷砖”，但后来会增长。该网站设计灵敏，因此网格流畅地从8x1调整到2x8，参见附图 现在我要做的是显示一个额外的容器，如果其中一个瓷砖被点击 这个容器是100％宽的，所以它显然应该出现在网格中当前行的下方。我可以用一个巨大的，嵌套的开关盒来解决这个问题，硬编码瓦片位置的所有范围。但我认为必须有办法解决这个问题。

正如您在图像中看到的那样，网格使用断点调整大小。我想在连续的最后一个元素之后插入我的gallery容器

在脚本中，我使用switch case来获取可用的列数。但我没有从这里得到更多。

// ...
switch (columns_currently_shown) {
    case 1:
        place_after_number = current_element;
        break;
    case 2:
        // ???
        break;
    case 3:
        // ???
        break;
    case 4:
        // ???
        break;
    }
  var place_after_this = document.getElementById("tile" + place_after_number);
  insertAfter(place_after_this, gallery_element_to_insert);
}

请不要建议我使用jQuery。我知道它可以使许多事情变得更简单，或者我可以使用库。但我试着学习JS，并希望这样做：）

编辑：--bump--如果有人在这篇文章中实际阅读的内容超过“网格”一词会有所帮助。