multiply div's repeat loop with divs

Navigation
0

I have a list of channel names that are broadcasting a particular game in twitch.tv (api) , so I can get all channels and list them.

The question is how to put them in a div To be in blocks horizontally (as in the image) and also that when it reached 4 blocks (div´s) , jump to the bottom line. > 

<?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>";


}
?>

' / p>     

asked by anonymous 27.04.2017 / 19:12

3 answers

0

A good alternative is to use flexbox.

28.04.2017 / 14:04
0

Look at the demo I made. Increase the result window to see JSFIDDLE

Using Jquery and Bootstrap 

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

CSS looks like this and you can adjust the height of the column 

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

And JQuery to get the 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());
});
    
27.04.2017 / 20:24
0

The code looks like this 

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

    
28.04.2017 / 00:33
Form Validation How to hide iframe from JS?