JSFiddle - React, Tailwind, and code Playground

by web designer

HTML

<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
<script src="http://masonry.desandro.com/masonry.pkgd.js"></script>
<div class="container" id="container">
    <div class="item one">
                        <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />    
    </div>
    <div class="item two">
                                 <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" /> 
    </div>
    <div class="item thre">
                                <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" /> 
    </div>
    <div class="item four">
                                 <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" /> 
    </div>
    <div class="item five">
                                <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" /> 
    </div>
    <div class="item six">
                                 <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" /> 
    </div>
    <div class="item seven">
                                 <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" /> 
    </div>
    <div class="item eight">
                                 <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" /> 
    </div>
    <div class="item nine">
                                 <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" /> 
    </div>
    <div class="item ten">
                                 <img...

CSS

.container {
    width:1100px;
    position:relative;
}
.container .item{
   float: left;
	margin-bottom: 10px;
	padding: 3px;
	overflow: hidden;
	position: relative;
	height:240px;
	width: 285px;
    border:1px solid red;
    margin-right:10px;
}
.container .item img{
    width:100%;
    height:100%;
}
.one{
    height:245px !important;
}
.two{
    height:200px !important;
}
.three{
    height:300px !important;
}
.five{
    height:350px !important;
}
.seven{
    height:310px !important;
}
.nine{
    height:400px !important;
}

JavaScript

var container = document.querySelector('#container');
var msnry = new Masonry( container, {
    itemSelector: '.item',
    columnWidth: 4,
});
 $('.item img').load(function(){
        var msnry = new Masonry( container, {
        itemSelector: '.item',
        columnWidth: 4,
    });
     //how use Show EachImage fadeOut and FadeIn
});
$(window).scroll(function(e) {
// how use show EachImage fadeOut and FadeIn
});