Question

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

+ BONUS问题：我如何固定缩略图，以便它们总是连续显示3个。从现在起，当我调整窗口大小时，它们就会改变（正如你在小提琴中看到的那样，现在每行只有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

上的演示

在缩略图下粘贴div +限制宽度

1 个答案: