AS
Кстати, было интересно, чем плохи для mansory нативные css-колонки?
Size: a a a
2020 November 30
МТ
Кстати, было интересно, чем плохи для mansory нативные css-колонки?
Поддерживаемость
ER
ResizeObserver имеет смысл если эта раскладка будет менять размеры не только при изменении размера окна, а например какая-то колонка будет ее толкать
Вот я подумал, если есть в карточках картинки, то нужно пересчитать после прогрузки.
PM
можешь в двух словах рассказать, почему дефолтный экспорт - плохо? я читал статьи на эту тему, но не проникся, в работе использую дефолтный экспорт и радуюсь жизни. 🙂 просто есть основной функционал, а есть типо утилитные функции, для каждого свой экспорт.
чаще всего говорят про проблемы с commonjs
AP
grid-template-rows: masonry; я не знал что такое вообще существуетER
grid-template-rows: masonry; я не знал что такое вообще существуетЭто под флагом у лисы только, css grid module lvl3
ER
Кстати, было интересно, чем плохи для mansory нативные css-колонки?
Разве в колонках контент не течет сверху вниз?
AS
Марк Танащук
Поддерживаемость
????
Я чего-то не понимаю?
Я чего-то не понимаю?
МТ
Это column count а не masonry сетка
AS
Разве в колонках контент не течет сверху вниз?
Течёт, но ведь этим можно управлять без особых проблем, правильно разбив массив…
AP
ну дык масоны раскладывают построчно, а колонки по колонкам
AS
Марк Танащук
Это column count а не masonry сетка
Я и не говорил, что это сделает его mansory. Я сказал, почему не использовать его для этого?
AS
ну дык масоны раскладывают построчно, а колонки по колонкам
Ответил выше
AP
Течёт, но ведь этим можно управлять без особых проблем, правильно разбив массив…
дак разбейте и покажите =)
МТ
masonry это когда у тебя в каждой колонке каждый элемент занимает только необходимое пространство и при необходимости переходит в нужную
МТ
Грубо говоря конечн
AS
дак разбейте и покажите =)
Ну… эм… ну хорошо. На сколько колонок хотите?)
AP
Вот я подумал, если есть в карточках картинки, то нужно пересчитать после прогрузки.
grid.items.slice(ncol).forEach((c, i) => {
let prev_fin = grid.items[i].getBoundingClientRect().bottom /* bottom edge of item above */,
curr_ini = c.getBoundingClientRect().top /* top edge of current item */;
c.style.marginTop = `${prev_fin + grid.gap - curr_ini}px`
});
Этот кусок по идее самый плохой. Здесь в цикле идет инвалидация дома и сразу его пересчет. По нормальному это делается сначало снятием всех ректов а потом постановкой всех марджинов. Но я не знаю правильно ли это будет по логике =)
МТ
Ну… эм… ну хорошо. На сколько колонок хотите?)
Автоматическое
МТ
С минимальным размером каждой в 300