Как при masonry вёрстке правильно вывести элементы на старницу?

Question

[TheBott]

Как при masonry вёрстке правильно вывести элементы на страницу? Имеется ввиду, есть жесткий(захардкоженный) каркас masonry сетки и map'ом пробежаться по массиву и вывести это всё дело в этой верстке. Проблема заключается в том, что у каждого блока свой className.

Comments

[Пашенька]

А что мешает дать всем ещё и общий класс?

[TheBott]

Пашенька, ммм, а что это изменит?

[Пашенька]

TheBott, цитирую:

Проблема заключается в том, что у каждого блока свой className.

[TheBott]

Пашенька, может быть вы не правильно поняли или я не верно объяснил, есть массив объектов по которому мы пробегаемся map'ом и выводим данные в JSX разметке, так вот нужно чтобы каждая сущность (объект) находилась в разных блоках, т.е первый объект массива в первом блоке, 2ой во 2ом блоке как на изображении. Примерная структура выглядет допустим так:

{arr.map((item, i) => (
            <div key={i}>
              <div>{item.name}</div>
              <div>{item.age}</div>
            </div>
          ))}

Но проблема заключается в том, что блоки имеют одну структуру (см. выше), но выглядят по разному (из за того что у каждого блока свои классы). Думаю понятно объяснил.

[Пашенька]

TheBott, возможно, вы можете классы хранить в объекте и динамически подставлять в разметку, точно так же, как и name, age.

[TheBott]

Пашенька, было бы здорово если было бы всё так, но среди этих блоков есть фильтрация, допустим мы что-то отфильтровали, и соответсвенно сущности поменялись, но блоки также остались статичны (изменился контент в блоках). Т.е я имею ввиду что не должно быть жесткой привязки каждого объекта к к какому то конкретному блоку.

[TheBott]

Пашенька, в любом случае спасибо

[Пашенька]

TheBott, можно решить даже на уровне CSS: каждый 2-ой див – с таким-то свойством(что в вашем случае различно), каждый 3-ий – с таким-то свойством. То есть вместо присвоения различных классов описать дочерние дивы по кратности.
Можно то же самое и на уровне js решать: проверять кратность индекса итерируемого объекта и давать уже заветный класс.
Возможно, можно как-то "по-реактовски" решить - здесь я не подскажу.

[TheBott]

Пашенька, любопытно, кстати совсем не подумал о css, спасибо огромное!

[Пашенька]

TheBott, будет самым красивым решением, в данном случае.

Answer 1

[Арсений Матыцин]

Жесткий захаркоженный каркас это про гриды.
Masonry это совсем не про жесткость.