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

【问题标题】：How to achieve this box layout with css and/or js?如何用 css 和/或 js 实现这个盒子布局？
【发布时间】：2013-11-24 00:53:13
【问题描述】：

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

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

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

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

我试过浮动它们、内联块和 jquery 砌体，但没有运气。

在 masonry 中找不到在隐藏框后会自动调整布局的设置。

如果我没有想法，我将不胜感激。

【问题讨论】：

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

标签： jquery html css layout jquery-masonry

【解决方案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

【讨论】：