@ -29,9 +29,9 @@ class PhotoGrid extends Component {
this . state = {
photos : [
{ src: grayPixel } ,
{ src: blackPixel } ,
{ src: greenPixel } ,
{ id: 1 , src: grayPixel } ,
{ id: 2 , src: blackPixel } ,
{ id: 3 , src: greenPixel } ,
] ,
} ;
}
@ -44,12 +44,12 @@ class PhotoGrid extends Component {
return new Promise ( ( resolve ) => {
setTimeout ( ( ) => {
resolve ( [
{ username: '@stickermule' , name : 'Sticker Mule' , src : 'https://images.unsplash.com/photo-1484244233201-29892afe6a2c?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&h=600&fit=crop&s=14d236624576109b51e85bd5d7ebfbfc' } ,
{ username: '@prostoroman' , name : 'Roman Logov' , src : 'https://images.unsplash.com/photo-1465414829459-d228b58caf6e?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&h=600&fit=crop&s=7a7080fc0699869b1921cb1e7047c5b3' } ,
{ username: '@richienolan' , name : 'Richard Nolan' , src : 'https://images.unsplash.com/photo-1478033394151-c931d5a4bdd6?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&h=600&fit=crop&s=3c74d594a86e26c5a319f4e17b36146e' } ,
{ username: '@wexor' , name : 'Wexor Tmg' , src : 'https://images.unsplash.com/photo-1437622368342-7a3d73a34c8f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&h=600&fit=crop&s=11ff283143c782980861a442a957da8e' } ,
{ username: '@dnevozhai' , name : 'Denys Nevozhai' , src : 'https://images.unsplash.com/photo-1465447142348-e9952c393450?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&h=600&fit=crop&s=ea06c0f0700ec469fdcb32e0d4c2928e' } ,
{ username: '@aronvandepol' , name : 'Aron Van de Pol' , src : 'https://images.unsplash.com/photo-1469719847081-4757697d117a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&h=600&fit=crop&s=9a568bc48e42d3bb60c97c0eb3dc20ac' } ,
{ id: 4 , username: '@stickermule' , name : 'Sticker Mule' , src : 'https://images.unsplash.com/photo-1484244233201-29892afe6a2c?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&h=600&fit=crop&s=14d236624576109b51e85bd5d7ebfbfc' } ,
{ id: 5 , username: '@prostoroman' , name : 'Roman Logov' , src : 'https://images.unsplash.com/photo-1465414829459-d228b58caf6e?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&h=600&fit=crop&s=7a7080fc0699869b1921cb1e7047c5b3' } ,
{ id: 6 , username: '@richienolan' , name : 'Richard Nolan' , src : 'https://images.unsplash.com/photo-1478033394151-c931d5a4bdd6?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&h=600&fit=crop&s=3c74d594a86e26c5a319f4e17b36146e' } ,
{ id: 7 , username: '@wexor' , name : 'Wexor Tmg' , src : 'https://images.unsplash.com/photo-1437622368342-7a3d73a34c8f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&h=600&fit=crop&s=11ff283143c782980861a442a957da8e' } ,
{ id: 8 , username: '@dnevozhai' , name : 'Denys Nevozhai' , src : 'https://images.unsplash.com/photo-1465447142348-e9952c393450?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&h=600&fit=crop&s=ea06c0f0700ec469fdcb32e0d4c2928e' } ,
{ id: 9 , username: '@aronvandepol' , name : 'Aron Van de Pol' , src : 'https://images.unsplash.com/photo-1469719847081-4757697d117a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&h=600&fit=crop&s=9a568bc48e42d3bb60c97c0eb3dc20ac' } ,
] ) ;
} , 300 ) ;
} ) ;
@ -105,8 +105,8 @@ class PhotoGrid extends Component {
render ( ) {
return (
< div ref = { element => this . element = element } className = "row my-shuffle" >
{ this . state . photos . map ( ( image , i ) => (
< div key = { i } className = "col-3@xs col-4@sm photo-item" >
{ this . state . photos . map ( ( image ) => (
< div key = { i mage. id } className = "col-3@xs col-4@sm photo-item" >
< div className = "aspect aspect--4x3" >
< div className = "aspect__inner" >
< img src = { image . src } / >