МТ
С masonry разметкой =)
Size: a a a
2020 November 30
МТ
Чтобы не было пробелов тобишь между верхним итемом и нижним в одной колонке
ER
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`
});
Этот кусок по идее самый плохой. Здесь в цикле идет инвалидация дома и сразу его пересчет. По нормальному это делается сначало снятием всех ректов а потом постановкой всех марджинов. Но я не знаю правильно ли это будет по логике =)
Можно пример, как было бы лучше?
A
В each собираете сетку?
AP
я не могу привести пример конкретно для вашей ситуации с масонами, лучше это когда сначало все померили в одном цикле, а потом все изменили в другом.
AP
типа
grid.items.forEach(measure);
grid.items.forEach(modify);
AS
Марк Танащук
С минимальным размером каждой в 300
Ну так это вроде про разметку) А я про разбиение массива
МТ
Можно пример, как было бы лучше?
Мы ведь оба говорим про css свойство?
AP
Ну так это вроде про разметку) А я про разбиение массива
дак разбиение зависит от кол-ва свободного места и контента =)
МТ
Где массивы в свойствах?
ER
В each собираете сетку?
Да, передаю элементы через each
AS
дак разбиение зависит от кол-ва свободного места и контента =)
А, ну тогда я всё это время неверно понимал суть. Извиняюсь 🙂
A
Можно внутри
#each node bind:this={nodes[item.id]} собрать все ноды
#each node bind:this={nodes[item.id]} собрать все ноды
МТ
Я лично недавно делал masonry и у меня такой вывод: лучше вручную хендлить количество колонок и тогда можно более менее на флексах все написать
МТ
иначе нужно изворачиваться очень дико
ER
AP
если кому-то интересно, есть спека layout-worklet и есть написанный masonry для нее https://github.com/GoogleChromeLabs/houdini-samples/blob/master/layout-worklet/masonry/masonry.js оттуда можно черпать какие-то идеи.
МТ
МТ
Если вызвать items++ то вот так вот выходит
ER
Вот пример с column-count, но это не то все равно
https://dev.to/ryandsouza13/creating-a-responsive-masonry-layout-using-the-css-column-count-property-4kf7
https://dev.to/ryandsouza13/creating-a-responsive-masonry-layout-using-the-css-column-count-property-4kf7
