jquery - How to achieve this box layout with css and/or js?

Question

I'm struggling to achieve layout as shown on image attached.

I need to have boxes of various height lined up from left to right in order 1,2,3...n as shown below.

If there is no space to the right the box should drop below the first box on the left.

I also need to be able to remove and add boxes. If box removed other boxes below the one removed should slide up.

I tried float them, inline-block and jquery masonry with no luck.

Couldn't find the setting in masonry that would automatically adjust the layout once the box is hidden.

I would greatly appreciate any help as I run out of ideas.

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