Problem left position 0

jbrat commented 8 years ago

Hello, I try to implement your react component in a project but the margin left is all the time equal to 0.

My React compoment :


import React from 'react';
import ReactDOM from 'react-dom';
import Masonry from 'react-masonry-component';
import { default as Video, Controls, Play, Mute, Seek, Fullscreen, Time, Overlay } from 'react-html5video';

var masonryOptions = {
    itemSelector: '.grid-item',
    columnWidth: '.grid-sizer',
    gutter: 10,
    isOriginLeft: true
};

export class Gallery extends React.Component {

    constructor()
    {
        super();
        this.state = {
            elements: []
        };
    };

    componentDidMount()
    {
        $.ajax({
            url: this.props.url,
            dataType: 'json',
            cache: false,
            success: function(data) {
                this.setState({
                    elements: data.contents
                });
            }.bind(this),
            error: function(xhr, status, err) {
                alert("Erreur lors de la requête code : " + status + err.toString());  
            }.bind(this)
        });
    };

    render() 
    {
        var childElements = this.state.elements.map(function(element, index) {
            if(element.type === 'images') {
                return (
                    <li className='grid-item'>
                        <img src={element.src} />
                    </li>    
                );
            }

            if(element.type === 'video') {
                return(
                    <li className='grid-item'>
                        <Video controls
                            poster="https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwjP54jK4IHOAhUE1RoKHXpABMwQjRwIBw&url=http%3A%2F%2Fwww.izoa.fr%2Fpapier-peint-deco-paysage%2F2729-poster-mural-design-tokyo-by-night.html&bvm=bv.127521224,d.d2s&psig=AFQjCNHVqrk-6MpdtGRLCJCsI4AMZOhrug&ust=1469094218037889"
                            onCanPlayThrough={() => {

                            }}>
                            <source src={element.src} type="video/mp4" />
                        </Video>
                    </li>
                );
            }
        });

        return (
            <Masonry
                className={'grid'} // default ''
                elementType={'gridMasonry'} // default 'div'
                options={masonryOptions} // default {}
                disableImagesLoaded={false} // default false
                updateOnEachImageLoad={false} // default false and works only if disableImagesLoaded is false
            >
            <div className="grid-sizer"></div> 
                {childElements}
            </Masonry>
        );
    };
}

My html file :

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="src/css/style.css">
    </head>
    <body>
        <h1> Test React Masonry </h1>
        <div id="gridMasonry">

        </div>
    </body>
    <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
    <script type="text/javascript" src="bundle.js">  </script>
    <script type="text/javascript" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</html>

The css :

/* ---- grid ---- */
.grid {
    max-width: 100%;
    padding: 0;    
}
/* ---- grid-item ---- */
.grid-sizer{
    width: calc(33% - 5px);
}
.grid-item {
    float: left;
}

#gridMasonry {
    height: 600px;
    width: 700px;
}

The main js

import {Gallery} from './gallery.jsx';
import ReactDOM from 'react-dom';
import React from 'react';

ReactDOM.render(<Gallery url="http://localhost/projetReactMasonry/json.php"/>, document.getElementById('gridMasonry'));

Have you got any ideas for this problem ?

The objective is to render images/movies from a json call with a path.

Thank you for future answer, Julien

afram commented 8 years ago

Hi @jbrat I'm terribly sorry, it's very late here and I'm away for the next 2 days. I will try to jump on and help asap, I didn't get a lot of time to look through this.

Hopefully you find your solution before then, otherwise I'll catch up with you soon!

DmitryTurovtsov commented 7 years ago

Any updates? it's still a big problem which doesn't allow to use this pretty nice lib in production for us... Tnx // @jbrat

jbrat commented 7 years ago

I haven't got any ideas to resolve this problem, i used another solution without masonry

gergelyvizvari commented 6 years ago

use columnWidth: 1 and it's working fine (if you doesn't wan to specify it)

eiriklv / react-masonry-component

Problem left position 0 #46