Exibir galeria sob demanda

Pessoal, tenho um código PHP que busca imagens em subpastas, porém gostaria de fazê-lo com que fosse carregado aos poucos pois são muitas fotos, tentei de ns maneiras entender o AJAX, mas não tive sucesso. Favor! Peço ajuda.

loadAjax.php

$dir = new DirectoryIterator( './images/portfolio/sem_categoria' );

// array contendo os diretórios permitidos

$diretoriosPermitidos = array("portfolio","sem_categoria");
foreach($dir as $file)

{
// verifica se $file é diferente de '.' ou '..'
if (!$file->isDot())
{
// listando somente os diretórios
if ( $file->isDir() )
{
// atribui o nome do diretório a variável

 $dirName = $file->getFilename();

 // subdiretórios
 $caminho = $file->getPathname();
 // chamada da função de recursividade
 recursivo($caminho, $dirName);
 }

 // listando somente os arquivos do diretório
 if ( $file->isFile() )
 {
 // atribui o nome do arquivo a variável
 $fileName = $file->getFilename();
 // print
 //echo "Arquivos: ".$fileName."<br>";
 }
 }
}

function recursivo( $caminho, $dirName ){

 global $dirName;

 $DI = new DirectoryIterator( $caminho );

 foreach ($DI as $file){
 if (!$file->isDot())
 {
 if ( $file->isFile() )
 {
 //
 $fileName = $file->getFilename();
 //
 //echo $dirName.": ".$fileName."<br>";
 echo "<div class='col-12 col-sm-6 col-md-4 col-lg-3 mb-2 d-flex justify-content-center' alt=''>
 <a href='{$fileName}' class='fresco' data-fresco-group='example' data-fresco-caption='ARJ SERVICE'>
 <img class='eni-img-thumb' src='images/portfolio/sem_categoria/{$dirName}/{$fileName}'>
 </a>
 </div>";
 }
 }

 }
}

	Tentei adaptar o código abaixo as minhas necessidades, mas não consegui.

<script>
 //variavel para controle de registros retornados
 var pagina = 0;
 var pesquisa = true;
 //function carrega
 function carrega(){
 $('#loading').html("<img src='img/loader.gif'/> Carregando Feeds...").fadeIn('fast');
 $.ajax({
 type: "POST",
 url: "loadAjax.php",
 data: "page="+pagina,//variavel passada via post
 cache: false,
 success: function(html){
 if(html){
 $('#loading').fadeOut('fast');
 $("#result").append(html);
 //mostra resultado na div result
 pesquisa = true;
 }else{

 $('#loading').html("Fim da pesquisa...").fadeIn('fast');
 pesquisa = false;
 }
 },
 error:function(html){
 $('#loading').html("erro...").fadeIn('fast');
 }
 });
 };
 //chama minha funcao ao carregar a pagina
 $(document).ready(function(){
 carrega();
 });
 //funcao de controle do scroll da pagina, na qual ela chega ao fim é acionada chamando
 //minha function carrega novamente para trazer mais dados dinamicamente
 $(window).scroll(function(){

 if($(window).scrollTop() + $(window).height() >= $(document).height()){
 pagina += 1;
 carrega();
 };
 });
 </script>