<div class="button-group filters-button-group listado">
  <button class="button is-checked bttodos" data-filter="todos" onclick="filtrar('todos')">TODOS</button>

  <button class="button btnone btc filter" data-filter="visu" onclick="filtrar('visu')">IDENTIDADE VISUAL</button>
  <button class="button btnone" data-filter="web" onclick="filtrar('web')">DESENVOLVIMENTO WEB</button>
  <button class="button btnone btc" data-filter="grafico" onclick="filtrar('grafico')">MATERIAL GRÁFICO</button>
  <button class="button btnone"  data-filter="comu" onclick="filtrar('comu')">COMUNICAÇÃO VISUAL</button>
  <button class="button btnone btc"  data-filter="digi" onclick="filtrar('digi')">MARKETING DIGITAL</button>
</div>

function pegaDados()
    {
        var idUltimo = $("#buttonIdUltimoItem").val();
        jQuery.ajax
            ({

                url: "pegaPortifolio.php?id="+idUltimo,
                dataType: "json", //Tipo de Retorno
                success:
                function(data) {
                    console.log(data);
                    var pt1 = "";
                    var i = 1;
                    var ultimo_id = 0;

                      var size = 0, key;
                      for (key in data) {
                            if (data.hasOwnProperty(key)) size++;

                        }

                     for(i = 0; i < size; i++){

                         pt1 +='<div class="element-item filter filtros todos  '+data[i].menu+'" data-category="transition"><div style="padding:2.5px;"><div style="border: 1px solid #AAAAAA;"><a href="#portfolioModal54" onclick="portfolioModal('+data[i].id+')" class="portfolio-link" data-toggle="modal"><img src="images/port/mini/'+data[i].imageM+'" alt="project 2"><div class="fundo-port"><h1>'+data[i].tipo+'</h1><h2>'+data[i].nome+'</h2></div></a></div></div></div>';


                         ultimo_id = data[i].id;

                         $("#buttonIdUltimoItem").val(ultimo_id);

                      }

                      monta_html(pt1);

                }
            });
         filtrar($('#buttonIdUltimoItem').attr('class'));

    }


    function monta_html(dados){

      $(".grid").append(dados); //joga o valor para um elemento html
    }

    </script>




               <div class="wrap">
    <div class="grid">
          <?php
    $servidor = 'localhost';
    $banco      = 'apixel_galeria';
    $usuario  = 'apixel_admin';
    $senha    = 'pixel123';
    $link     = @mysql_connect($servidor, $usuario, $senha);
    $db          = mysql_select_db($banco,$link);
    $idUltimoItem = 0;
    if(!$link)
    {
        echo "erro ao conectar ao banco de dados!";exit();
    }

    $sql = "SELECT * FROM portfolio ORDER BY id DESC limit 6";
    $query = mysql_query($sql);

    while($sql = mysql_fetch_array($query)){
    $id = $sql["id"];
    $idUltimoItem = $id;
    $nome = $sql["nome"];
    $tipo = $sql["tipo"];
    $desc = $sql["desc"];
    $menu = $sql["menu"];
    $imageM = "images/port/mini/" . $sql["imageM"];
    $imageF = $sql["imageF"];
        ?>
              <div class="element-item filter filtros todos <?php echo "$menu";?>" data-category="transition">

                  <div style="padding:2.5px;">
                  <div style="border: 1px solid #AAAAAA;">
                       <!--<a href="#portfolioModal54" class="portfolio-link" data-toggle="modal" id="executaAjax" value="Executa ajax">-->
                       <a href="#portfolioModal54" class="portfolio-link" data-toggle="modal" onclick="portfolioModal(<?php echo $id;?>)" value="Executa ajax">
                                                <img src="<?php echo "$imageM"?>" alt="project 2">
                          <div class="fundo-port">
                            <h1><?php echo "$tipo"?></h1>
                            <h2><?php echo "$nome"?></h2>
                        </div>

                          </a>

                      </div>

                  </div>

      </div>
            <?php
    }
    ?>
    </div></div>
            <!-- BOTÃO CARREGAR MAIS-->
           <div id="rend-more">
             <!-- <input type="hidden" value="0" id="ultimo_id"> campo oculto que armazena o valor do ultimo ID buscado no banco -->

                <button  type="button" id="buttonIdUltimoItem" onClick="pegaDados();" value="<?= $idUltimoItem;?>" style="width: 262px; height: 50px; border: 1px solid rgb(84, 128, 128); position: relative; top: 30%; left: 50%; transform: translateX(-50%); cursor: pointer;  background-color: white;" class="todos">
                    <h2 style="text-align: center;color:#4d8984;font-family: 'Gotham-Thin';float: left;font-size: 25px;padding-left: 30px;padding-top: 5px;">CARREGAR</h2>
                    <h3 style="padding-left: 5px;float: left;font-size: 25px;color:#4d8984;font-family: 'gotham-bold';padding-top: 5px;">+</h3></button>
            </div>
        </div>

<?php

function fn_conexao(){

    $dbuser = "apixel_admin";
    $dbpass = "pixel123";

    try {

        $pdo = new PDO('mysql:host=localhost;dbname=apixel_galeria',  $dbuser, $dbpass);
        $pdo -> setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_WARNING );
    } catch(Exception $e) {

        echo 'Erro na conexao: ' . $e->getMessage();
    }

    return $pdo;
}

function dados($pdo){

    try {

            if(!isset($_GET['id']) or $_GET['id'] == null){

                $id = 0; //se o GET nao for enviado o for enviado como nullo , a variável ID pega o valor de 0

            }else{

                $id = $_GET['id']; //pega o valor passado via GET
            }

            $arr = array();

            $sql = "ALTER DATABASE portfolio CHARSET = UTF8 COLLATE = utf8_general_ci";
            $sql = "SELECT * FROM portfolio WHERE id < $id ORDER BY id DESC LIMIT 6";
            $stmt = $pdo->prepare($sql);
            $stmt->execute();
            $linha = $stmt->fetchAll(PDO::FETCH_ASSOC);
            if($stmt->rowCount() >= 1){

                return $linha; //retorna o resultado da query

            }else {

                return 0;

            }
        } catch(Exception $e) {

            print 'Erro ao inserir os dados no banco: ' . $e->getMessage();
            $conexao = desconecta($conexao);

        }
}

$conexao = fn_conexao();
$dados = dados($conexao);

$dados = json_encode($dados); //converte o resultado para json

print $dados; //imprime os dados na tela
?>