Jquery 如何使用css和/或js实现此框布局？

我正在努力实现如所附图片所示的布局

我需要有不同高度的盒子从左到右排列，顺序为1,2,3…n，如下所示

如果右侧没有空间，则该框应位于左侧第一个框的下方

我还需要能够删除和添加框。如果盒子被移除，则移除的盒子下方的其他盒子应向上滑动

我尝试了浮动它们、内联块和jquery砖石，但没有成功

在“砖石”中找不到在隐藏长方体后自动调整布局的设置

我将非常感谢任何帮助，因为我没有想法了。

---

如果没有JavaScript，还无法实现跨浏览器的这种布局。您可以尝试使用，但目前这在跨浏览器中不起作用，并且还有一些其他问题

幸运的是，您可以删除项目并触发布局更改：

var container = document.querySelector('#remove-demo .masonry');
var msnry = new Masonry( container, {
  columnWidth: 60
});

eventie.bind( container, 'click', function( event ) {
  // don't proceed if item was not clicked on
  if ( !classie.has( event.target, 'item' ) ) {
    return;
  }
  // remove clicked element
  msnry.remove( event.target );
  // layout remaining item elements
  msnry.layout();
});

见文件删除：

---

只是想知道为什么有人想结束这个问题？