Botão carregar + Dados do Banco de Dados MYSQL substituindo "Selec

[kaiquemix 1]

Olá galera tudo bem?

Estou querendo configurar um botão para que sempre quando eu aperta no botão CARREGAR + o limit 18 acrescente sempre +18.

EXEMPLO:

$sql = "SELECT * FROM portfolio ORDER BY id DESC limit 18";

**BOTÃO CLICKADO**

$sql = "SELECT * FROM portfolio ORDER BY id DESC limit 36";

**BOTÃO CLICKADO**

$sql = "SELECT * FROM portfolio ORDER BY id DESC limit 54";

Eu coloquei esse limit para arrumar o layout e aparecer apenas 18 blocos no meu site e ir carregando sempre +18 ao aperta no botão.

CODIGO:

<div class="grid">


          <?php

    $servidor = 'localhost';

    $banco      = 'apixel_galeria';

    $usuario  = 'root';

    $senha    = '';

    $link     = @mysql_connect($servidor, $usuario, $senha);

    $db          = mysql_select_db($banco,$link);

    if(!$link)

    {

        echo "erro ao conectar ao banco de dados!";exit();

    }


    $sql = "SELECT * FROM portfolio ORDER BY id DESC limit 18";

    $query = mysql_query($sql);


    while($sql = mysql_fetch_array($query)){

    $id = $sql["id"];

    $nome = $sql["nome"];

    $tipo = $sql["tipo"];

    $desc = $sql["desc"];

    $menu = $sql["menu"];

    $imageM = $sql["imageM"];

    $imageF = $sql["imageF"];

        ?>

              <div class="element-item <?php echo "$menu";?>" data-category="transition">

           <a href="#portfolioModal54" class="portfolio-link" data-toggle="modal">

                                    <img src="<?php echo "$imageM"?>" alt="project 2">

                 <div class="mask">    <div class="conteudo_mask" style="

        transform: translateY(-50%);

        top: 50%;

        position: relative;

        /* float: left; */

        ">                   <h1><?php echo "$nome"?></h1>                   <div id="lin" style="

        width: 200px;

    "></div>                   <h2><?php echo "$tipo"?></h2>                                                    </div><h3 style="

        transform: translateY(-50%);

        top: 50%;

        position: relative;

    ">VEJA <br><img src="images/mais.png" alt="mais" style="width: 20px;height: 19px;margin-bottom: -1px;margin-top: 3px;"></h3></div>

                                    </a>

      </div>


            <?php

    }

    ?>

    </div>

            <!-- BOTÃO CARREGAR MAIS-->

           <div id="rend-more">

                <button class="button bt1" 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;">

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

[Hocrux 2]

No select você deve colocar da seguinte maneira, SELECT * FROM portfolio ORDER BY id DESC limit new_value, 18

No caso esse new_value vai ser 36, ele deve estar em uma variável onde o valor da mesma vai mudar a cada clique do botão.

 

Eu tenho um exemplo aqui, vou te passar.

 

JS:

http://pastebin.com/BavspHk8

 

PHP:

http://pastebin.com/LfHm2Cb2