Question

我正在用一些图像测试反应砌体组件。

但是由于某些原因，图像无法以砖石般的方式正确显示。相反，它们仅排成一列，如下所示。

有人知道我做错了吗？下面是我的组件和CSS代码。

：。

图库组件：

import React from 'react';
    import Masonry from 'react-masonry-component';
    import './grid.css';

    const masonryOptions = {
        transitionDuration: 0
    };

    const imagesLoadedOptions = { 
        itemSelector: '.grid-item',
        columnWidth: '.grid-sizer',
        percentPosition: true,
     }

    class Gallery extends React.Component {
        constructor(props){
            super(props);
            this.state={elements:[
                {src:"https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg"},
                {src:"https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg"},
                {src:"https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/look-out.jpg"},
                {src:"https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/one-world-trade.jpg"},
                {src:"https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drizzle.jpg"},

            ]}
        }


        render() {
            const childElements = this.state.elements.map(function(element,index){
                return (
                     <div key={index} className='grid-item'>
                         <img src={element.src} />
                     </div>
                 );
             });
             return (
                <Masonry
                className={'.grid'} // default ''
                elementType={'div'} // default 'div'
                options={masonryOptions} // default {}
                imagesLoadedOptions={imagesLoadedOptions}
                disableImagesLoaded={false} // default false
                updateOnEachImageLoad={false} // default false and works only if disableImagesLoaded is false
            >
            <div className="grid-sizer"> {childElements}</div>


               </Masonry>
            );

            }
    }

    export default Gallery;

CSS文件：

/* ---- grid ---- */
.grid {
    max-width: 100%;
    padding: 5px;    
    margin: 5px
}

/* ---- grid-item ---- */
.grid-sizer{
    width: 33.333%;

}
.grid-item {
    width: 33%;
    height: 20%;
    float: left;
}

.grid-item img {
    display: block;
    width: 100%;
  }

Answer 1

这似乎与您的grid-sizer元素有关。我建议摆脱该类的CSS样式。

/* ---- grid ---- */
.grid {
    max-width: 100%;
    padding: 5px;    
    margin: 5px
}

/* ---- grid-item ---- */
.grid-item {
    width: 33%;
    height: 20%;
    float: left;
}

.grid-item img {
    display: block;
    width: 100%;
  }

为什么反应砌体组件不起作用？

1 个答案: