Реагировать на проблему выравнивания предметов из масонства - PullRequest
Новая
       20

Реагировать на проблему выравнивания предметов из масонства

1 голос
/ 12 июня 2019

Я использую библиотеку реактивной кладки: https://www.npmjs.com/package/react-masonry-component Я добавил три элемента с различной шириной / высотой: изображение 

import React from 'react';
import Masonry from 'react-masonry-component';

const gridItems = [
    { width:"200px",height: "200px"},
    { width:"100px",height: "100px"},
    { width:"100px",height: "100px"}
].map((i, index) => {

    return <div className={`grid-item`} style={{width: i.width, height: i.height}}>
        <div style={{backgroundColor: 'green', height: '100%'}}>{index}</div>
    </div>;
})

const gridView = (props) => {

    return <div className="">
        <Masonry
            className={'masonry-view'}
           >
            {gridItems}
        </Masonry>
    </div>;
}

export default gridView;

Проблема видна на прикрепленном изображении - третий элемент не выровнен правильно.Кто-нибудь знает решение?

1 Ответ

0 голосов
/ 13 июня 2019

РЕШЕНИЕ: Проблема заключалась в том, что я не добавил свойство columnsWidth. Поэтому я создал объект Options и добавил columnsWidth наименьшую ширину столбца, и это сработало.

...