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

Question

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

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

如果右侧没有空间，则该框应低于左侧第一个框。

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

我试过 float 它们、内联 block 和 jquery 砌体，但没有成功。

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

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

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