<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>

<script>
var corpo = "";
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 third-effect '+data[i].menu+'" data-category="transition"><div style="padding:2.5px;"><div style="border: 1px solid #AAAAAA;"><img src="images/port/mini/'+data[i].imageM+'" alt="project 2"><div class="mask"><a href="#portfolioModal54" onclick="portfolioModal('+data[i].id+')" class="portfolio-link info" data-toggle="modal"></a></div><div class="fundo-port"><h1>'+data[i].tipo+'</h1><h2>'+data[i].nome+'</h2></div></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="grid">
      <?php
$servidor = '###';
$banco      = '###';
$usuario  = '###';
$senha    = '###';
$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 third-effect <?php echo "$menu";?>" data-category="transition">
              <div style="padding:2.5px;">
              <div style="border: 1px solid #AAAAAA;">
                                            <img src="<?php echo "$imageM"?>" alt="project 2">
                               <div class="mask">
                               <a href="#portfolioModal54" class="portfolio-link info" data-toggle="modal" onclick="portfolioModal(<?php echo $id;?>)" value="Executa ajax"></a>
                     </div>
                      <div class="fundo-port">
                        <h1><?php echo "$tipo"?></h1>
                        <h2><?php echo "$nome"?></h2>
                    </div>
                  </div>
              </div>
  </div>
        <?php
}
?> </div>

<div id="rend-more">
            <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>

<?php


function fn_conexao(){


    $dbuser = "###";
    $dbpass = "###";


    try {


        $pdo = new PDO('mysql:host=###;dbname=###',  $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
?>