JSFiddle - React, Tailwind, and code Playground

by leeroy

HTML

<div class="grid-container">
</div>

CSS

body {
  margin: 0;
  padding:0;
  background-color:#000000;
}

* {
    box-sizing: border-box;
}

.grid-container {
  display:grid;
  grid-template-columns:repeat(6, 16.66666666666667%);
  grid-gap:0;
}

.grid-item {
    background-color:#cccccc;
    height:auto;
    opacity: 0;
    border: 1px rgb(0,0,0) solid;
    -webkit-transform: scale(0, 0);
    -moz-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    transform: scale(0, 0);
    -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
    -moz-transition: opacity 0.3s ease, -moz-transform 0.3s ease;
    -o-transition: opacity 0.3s ease, -o-transform 0.3s ease;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

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

.grid-item.loaded {
    /*transition-delay: 0s, 0.782609s;*/
    opacity: 1;
    transform: scale(1, 1);
}

JavaScript

/*jQuery('.grid-item').each(function() {
	var $item = jQuery(this);
	setTimeout(function() {
  	$item.addClass('visible');
  }, randomIntFromInterval(100, 2000));
});

function randomIntFromInterval(min,max)
{
    return Math.floor(Math.random()*(max-min+1)+min);
}*/

var loading = false;
var config = {};
var currentPage = 1;

jQuery.get('https://api.themoviedb.org/3/configuration?api_key=24dccd792edc8b80a1351ffb89128011').then(function(configData) {
	config = configData;
  loadMoviesFromApi(1);
});

$(window).scroll(function() {
  if($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
		loadMoviesFromApi(currentPage+1);
  }
});

function loadMoviesFromApi(page) {
	if(loading) return;
  
  loading = true;
  
	jQuery.get('https://api.themoviedb.org/3/discover/movie?page='+ page +'&api_key=24dccd792edc8b80a1351ffb89128011').then(function(movies) {
  	currentPage = page;
  	loadMoviesInGrid(movies.results);
  }).always(function() {
  	loading = false;
  });
}

function loadMoviesInGrid(movies) {
	movies.forEach(function(movie) {
    	var $item = jQuery('<div class="grid-item"></div>');
      var $itemImage = jQuery('<img src="'+ config.images.secure_base_url +'w300'+ movie.poster_path +'" alt="" />');
      $item.append($itemImage);
      
      $itemImage.one('load', function() {
      	$item.addClass('loaded');
      });
    
    	jQuery('.grid-container').append($item);
    });
}