Question

我正在努力做到这一点，所以有一个线上有3个然后是休息然后3个然后休息等等。

任何帮助？

$.getJSON("https://api.twitch.tv/kraken/search/streams?q=dayz&limit=15&type=suggest&callback=?", function (e) {
    var t = "";
    $.each(e.streams, function (e, n) {
        t = t + "<div class='panel-heading'><h3 class='panel-title'></h3><div class='content1'><center><img src='" + n.channel.logo + "' width='33' height='30'/><b> <a href='http://twitch.tv/" + n.channel.name + "'>" + n.channel.display_name + " - " + n.viewers + "</b></a></center></div></div><div class='panel-body'><div class='content3'><center><a href='http://twitch.tv/" + n.channel.display_name + "'><img src='" + n.preview.medium + "' width='400' height='222'/></a></center></div></div>"
    });
    $("#content").html(t)
})

示例：

http://i.stack.imgur.com/h0xvX.gif

Answer 1

DEMO

创建3个不同的content div而不是1

<div id="content1" class="panel panel-default"></div>
<div id="content2" class="panel panel-default"></div>
<div id="content3" class="panel panel-default"></div>

设置这些div的样式

.panel.panel-default {
    width:430px;
    display:inline-block;
}

相应地分发结果

$.getJSON("https://api.twitch.tv/kraken/search/streams?q=dayz&limit=15&type=suggest&callback=?", function (e) {
    var t = u = v = "";
    $.each(e.streams, function (e, n) {
        switch ((e + 1) % 3) {
            case 1:
                t = t + "<div class='panel-heading'><h3 class='panel-title'></h3><div class='content1'><center><img src='" + n.channel.logo + "' width='33' height='30'/><b> <a href='http://twitch.tv/" + n.channel.name + "'>" + n.channel.display_name + " - " + n.viewers + "</b></a></center></div></div><div class='panel-body'><div class='content3'><center><a href='http://twitch.tv/" + n.channel.display_name + "'><img src='" + n.preview.medium + "' width='400' height='222'/></a></center></div></div>";
                break;
            case 2:
                u = u + "<div class='panel-heading'><h3 class='panel-title'></h3><div class='content1'><center><img src='" + n.channel.logo + "' width='33' height='30'/><b> <a href='http://twitch.tv/" + n.channel.name + "'>" + n.channel.display_name + " - " + n.viewers + "</b></a></center></div></div><div class='panel-body'><div class='content3'><center><a href='http://twitch.tv/" + n.channel.display_name + "'><img src='" + n.preview.medium + "' width='400' height='222'/></a></center></div></div>";
                break;
            case 3:
            default:
                v = v + "<div class='panel-heading'><h3 class='panel-title'></h3><div class='content1'><center><img src='" + n.channel.logo + "' width='33' height='30'/><b> <a href='http://twitch.tv/" + n.channel.name + "'>" + n.channel.display_name + " - " + n.viewers + "</b></a></center></div></div><div class='panel-body'><div class='content3'><center><a href='http://twitch.tv/" + n.channel.display_name + "'><img src='" + n.preview.medium + "' width='400' height='222'/></a></center></div></div>";
                break;
        }
    });
    $("#content1").html(t);
    $("#content2").html(u);
    $("#content3").html(v);
})

JS造型3每行

1 个答案: