0

我正在尝试做到这一点，所以一行有 3 个，然后休息，然后再有 3 个休息等等。

有什么帮助吗？

到目前为止的代码http://jsfiddle.net/82wNq/69/

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

4

1 回答 1

1

演示

创建 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);
})
于 2014-01-10T21:56:32.503 回答