如何用css和/或js实现这个盒子布局？

Question

我正在努力实现布局，如图所示。

我需要从左到右排列各种高度的盒子，顺序为1,2,3 ...... n，如下所示。

如果右边没有空格，则框应该落在左边第一个框的下方。

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

我试过浮动它们，内联块和jquery砖石没有运气。

在隐藏框时，无法在砌体中找到会自动调整布局的设置。

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

Answer 1

没有JavaScript，就没有办法实现这样的跨浏览器布局。您可以尝试使用css-columns，但目前这不适用于跨浏览器，还有其他一些问题。

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

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();
});

查看文档#remove： http://masonry.desandro.com/methods.html