使用JSON进行无限滚动

时间:2016-01-11 16:50:48

标签: javascript jquery json ajax infinite-scroll

我有JSON数据,我追加到<ul>容器获取一个长列表。我想使用无限滚动jQuery通过向下滚动来分页结果。有什么建议?我尝试使用无限滚动插件,但它也可以是其他插件,只要它有效..

<div class="entity_cloud_main" id="cloud_id">
        <ul class="entity_cloud_list_main">
        </ul>
</div>

<script>
 $( document ).ready(function() {
        var tag_id = $('#tag_id_hidden').val();
        $.getJSON("/tags/get_who_tagged/" + '{{tag.tag_id}}' + "/", function(data) {
                var lines = '';
                for (var i = 0; i < data.length; i++) {
                    lines += '<li class="entity_cloud_list_main_li" id="cloud_list_li_' + i + '">';
                      lines += 
                      '<a href="#" id="li_count_' + i + '" class="count_class"><span id="hover_' + i + '" class="li_count" data-target="#hidden_' + i + '">' + data[i]['count'] + '</span><div class="hidden_users" id="hidden_' + i + '">'
                    for (var j = 0; j < data[i]['usernames'].slice(0,10).length; j++) {
                        lines += data[i]['usernames'][j]['username'] + '<br>'
                        users_showing = data[i]['usernames'].slice(0,10).length
                    }
                    users_number = (data[i]['usernames'].length) - (users_showing)
                    if (data[i]['usernames'].length > 10) {
                      if (data[i]['usernames'].length = 11) {
                        lines += '<span style="font-weight:300;">and '+ users_number +' other...</span></div></li>';
                      } else {
                        lines += '<span style="font-weight:300;">and '+ users_number +' others...</span></div></li>';
                      }
                    } else {
                        lines += '</div></a>';}
                    lines += '</li>';
                    $('.entity_cloud_list_main').html(lines);
                }
        });
  });
</script>

0 个答案:

没有答案