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

【问题标题】：Why is react masonry component not working?为什么反应砌体组件不起作用？
【发布时间】：2018-07-09 04:52:58
【问题描述】：

我正在用一些图像测试 react-masonry-component。

但由于某种原因，图像并没有以类似砖石的排列方式正确显示。相反，它们只是排成一列，如下所示。

有谁知道我做错了什么？下面是我的组件和 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%;
  }

【问题讨论】：

标签： css reactjs masonry

【解决方案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%;
  }

【讨论】：