Как добиться этого макета коробки с CSS и / или JS?

Question

Как добиться этого макета коробки с CSS и / или JS?

0

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

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

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

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

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

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

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

spirytus 12 нояб. 2013, в 03:41

Источник

0

просто интересно, почему кто-то захочет закрыть этот вопрос?
spirytus 12 нояб. 2013, в 04:00

Теги:

jquery

html

css

layout

jquery-masonry

1 ответ

Ещё вопросы

просто интересно, почему кто-то захочет закрыть этот вопрос?

hugo der hungrige · Accepted Answer · 2013-11-12T01-09-00.000Z

Без JavaScript еще не удалось достичь такого кросс-браузера. Вы можете попробовать использовать css-столбцы, но пока это не работает кросс-браузер и есть некоторые другие проблемы.

К счастью, вы можете удалить элементы и вызвать изменение макета с помощью кладки:

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 # remove: http://masonry.desandro.com/methods.html