javascript - 在缩略图下面贴一个 div + 限制宽度

Question

好的。这听起来可能有点复杂。我有一个从 JSON 中获取缩略图的脚本。它获取 9 个缩略图，然后点击 #load 它再获取 9 个。如何在缩略图下方设置“加载更多”按钮，以及如何在每次单击时将其粘在缩略图的底部？ (我不希望它像现在这样，在侧面，而是在中间和下面)。

+奖励问题:如何固定缩略图，使它们始终连续显示 3 个。从现在开始，当我调整窗口大小时，它们会发生变化(正如您在 fiddle 中看到的那样，现在每行只有 2 个)。

jsfiddle.net/z6ge55ky/

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<div id="twitch">

<script src="js/main.js"></script>
    <div id="load">
    <img class="hvr-pulse" src="http://i.imgur.com/KHIYHFz.png?1">
</div>
</div>

    $(function() {
    var i=0;
    var twitchApi = "https://api.twitch.tv/kraken/streams";
    var twitchData;
    $.getJSON(twitchApi, function(json) {
        twitchData = json.streams;

        setData()
    });

    function setData(){
        var j = twitchData.length > (i + 9)  ? (i + 9) : twitchData.length;
        for (; i < j; i++) {
            var streamGame = twitchData[i].game;
            var streamThumb = twitchData[i].preview.medium;
            var streamVideo = twitchData[i].channel.name;
            var img = $('<img style="width: 250px; height: 250px;" src="' + streamThumb + '"/>')
            $('#twitch').append(img);
            img.click(function(){
            $('#twitch iframe').remove()
            $('#twitchframe').append( '<iframe frameborder="0" style="overflow:hidden; margin-left: 25px; width:400px; height:250px; position: fixed; top: 0; margin-top: 23.55%;" src="http://player.twitch.tv/?channel=' + streamVideo + '"></iframe>');
          });
        }
    }       

    $('#load').click(function() {
        setData();
    }); 
});

#twitch {
    width: 60%;
    position: absolute;
    left: 20%;
    text-align: center;
}

#twitch img {
    border: 5px solid rgba(0,0,0,0);
    margin: 0 auto; 
    cursor: pointer;
}


#load {
    bottom: 0;
    position: absolute;
}

Answer 1

您已经为 #twitch 60% 声明了宽度，将其移除并为 #load 使用 top:100%

演示 jsfiddle