0

Tenho uma lista de nomes de canais que estão transmitindo um determinado jogo na twitch.tv (api), sendo assim, consigo pegar todos os canais e listar os mesmos.

A dúvida é de como colocar-los em uma div Para ficar em blocos na horizontal (como na imagem) e também que, quando chegasse a 4 blocos (div´s), pulasse para a linha de baixo.

<?php

$api2 = file_get_contents("https://api.twitch.tv/kraken/search/streams?client_id=g5ynk8n0llmefg9m70ruyg36bbt6si&query=fifa17&limit=100");

$defuse = json_decode($api2);

if($defuse == null){
    echo "erro";

}else{

$total_lives=$defuse->_total;

echo "Toltal de Lives:  ".$total_lives."</br>";


    foreach($defuse->streams as $v)

    echo "Nome do Canal: ".$v->channel->name."</br>";


}
?>

Quero que fique assim cada  nome em cada bloco inserir a descrição da imagem aqui`

3 Respostas 3

0

Uma boa alternativa é utilzar flexbox.

0

Olha a demo que fiz. Aumente a janela do resultado pra ver JSFIDDLE

Usando Jquery e Bootstrap

// Aqui comeca o for each
    <div class="col-md-3 channel">
        //php echo vai aqui
    </div>
//Aqui termina o foreach

O CSS fica assim e você pode ajustar a altura da coluna

.channel {
    height: 150px; //Altura exemplo
}

E o JQuery para conseguir as random colors

function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}


$(".channel").each(function() {
    $(this).css('background-color', get_random_color());
});
4
  • Não deu certo amigão queria fazer com que cada nome ficaria e uma div nesse jeito que você falou só ficou uma div só e não as outras 99, queria que a cada resultado do foreach seria com uma div 27/04/2017 às 22:06
  • Olha então o PHP foi integrado de forma errada. O foreach tem que ficar por fora da div e o echo dentro dela. Cada vez que passar pelo loop ele gera a div. Vou até editar a resposta pra vc ver 27/04/2017 às 22:15
  • Opa amigão consegui resolver graças a sua ajuda obrigado 27/04/2017 às 22:30
  • Que bom que deu certo! 27/04/2017 às 22:44
0

O código ficou assim

<html lang="en">

Lives .bloco{background-color:pink;height:250px;border: solid 2px #000;}

</style>

        foreach($defuse->streams as $v){
             $todos_nomes = $v->channel->name;
    ?>
    <div class="bloco col-md-3">
    <?php echo $todos_nomes; ?>
</div>
<?php }}?>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .