Использование Masonry.js на jQuery генерирует div

Question

Использование Masonry.js на jQuery генерирует div

0

На днях я нашел Masonry.js и хотел начать использовать его в проектах. Чтобы практиковать, я решил, что хочу попытаться создать страницу, которая будет генерировать 16 разделов каждый раз, когда я нажимаю кнопку случайных высот и цветов и смотрю, как они правильно позиционируются. Дело в том, что оно не работает. Дивы генерируются отлично, что, по-видимому, является проблемой - заставить масонство пересчитать высоту контейнера из сгенерированных div. Без высоты на контейнере масонство не может вычислить соответствующую высоту для любого из других div. Я попытался использовать clearfix в контейнере, чтобы убедиться, что он растягивается вокруг вложенных элементов, но не повезло. Может ли кто-нибудь помочь?

Проверьте это перо этого

Kyle Shevlin 23 окт. 2013, в 23:10

Источник

Теги:

javascript

jquery

html

css

jquery-masonry

1 ответ

Ещё вопросы

Barbara Laird · Accepted Answer · 2013-10-23T18-43-00.000Z

Вам нужно использовать addItems для добавления элементов или уничтожения и воссоздания, чтобы пересчитать его: http://codepen.io/bhlaird/pen/HusbL

//Reload Masonry
$wall.masonry('destroy');
$wall.masonry({
  columnWidth: '.brick',
  itemSelector: '.brick'
});

Вы также можете выполнить перезагрузку и компоновку:

//Reload Masonry
$wall.masonry('reloadItems');
$wall.masonry('layout');

Отличный ответ, оба работают. Второй ответ имеет интересный эффект генерации всех div в верхней части: 0, left: 0, а затем они быстро переходят в свое местоположение. С первым ответом дивы просто появляются на месте. Спасибо.