Как достичь этой компоновки ящиков с помощью css и/или js?

Question

Я изо всех сил пытаюсь достичь макета, как показано на прикрепленном изображении.

Мне нужно иметь коробки различной высоты, выстроенные слева направо в порядке 1,2,3 ... n, как показано ниже.

Если нет места справа, коробка должна опускаться ниже первого окна слева.

Мне также нужно уметь удалять и добавлять ящики. Если поле удалено, другие поля под удаленным должны сдвинуться вверх.

Я попробовал поплавать им, встроенный блок и jquery kason, не повезло.

Не удалось найти настройку в каменной кладке, которая автоматически отрегулирует макет, как только ящик будет скрыт.

Буду признателен за любую помощь, поскольку у меня заканчиваются идеи.

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

см DOCS # удалить: http://masonry.desandro.com/methods.html