AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

留个纪念吧,瀑布流

2013-02-18 744
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：      
<script type="text/javascript">
  <!--
  var classId = 1;//类型Id（歌曲、歌手）
  var typeId = 1;//榜单详细类型Id（热度榜、搜索榜）
  var param = location.search;
  var page = 1,pageSize=50, pagepaper=1,pagesizepaper=4,IsGetInfo = false;
  if ((param != null) && (typeof (param) != "undefined") && param != '') {
  var params = param.substring(1).split('&');
  classId = params[0].split('=')[1];
  typeId = params[1].split('=')[1];
  }
  //默认调用
  $(function() {
  showListData(classId, typeId);
  $('.play_gray').die('click');
  });
   
  //动态显示列表数据
  function showListData(cId, tId, event) {
  IsGetInfo = false;
  //add by lidong 20121129
  var target = event;
  if (target) {
  $('#left').find('li').removeClass('hover');
  $(target).parent('li').addClass('hover');
  } else {
  $('#left').find('li').removeClass('hover');
  $('#left').find('li[type="'+tId+'"]').addClass('hover');
  }
  //add end
  classId = cId;
  typeId = tId;
  page = 1;
  pagepaper = 1;
  window.scroll(0,0);
  //获取数据
  getAllRankings();
  }
  //获取歌手歌曲top列表数据
  function getAllRankings() {
  var url='';
  if(typeId== 13 || typeId== 14 || typeId== 11 || typeId== 5){
  url = config.migu_top_list_act + "?type=" + typeId;
  }else{
  url = config.migu_more_list_act + "?type=" + typeId+"&page="+page+"&pageSize="+pageSize;
  }
  $.ajax( {
  type : "GET",
  url : url,
  timeout : 30000,
  dataType : "JSON",
  error : function(response) {
  alert('request data error');
  },
  beforeSend : function() {
  $("#right").html('<img width="32" height="32" src="images/loading.gif" style="vertical-align:middle;" alt="正在加载数据中" title="正在加载数据中"/>');
  },
  success : function(data) {
  document.title='咪咕音乐指数-'+getNameByClassId(typeId);
  $('.mb5').html('<a href="index.html">指数</a>&gt;'+getNameByClassId(typeId));
  var name = classId == 1 ? "歌曲" : "歌手";
  var styleclas = classId==1?"title_song":"title_singer";
  var songorsinger = classId == 1 ? "soundmsgspan01": "soundmsgspan08";
  var rankingByRanking = '';
  rankingByRanking += '<div class="ind_tit"><ul><li class="+styleclas+"></li></ul></div>'
  if (data.contents) {
  //歌曲
  if (classId == 1) {
   
  rankingByRanking +='<ul class="music_list music_list_hide h_music_list h_music_libray_list"><li class="list list_title_color"><span class="fl soundmsgspan08">排名</span><span class="fl soundmsgspan08 mr20">趋势</span><span class="fl soundmsgspan10 mr20">歌曲名</span><span class="fl soundmsgspan01">指数</span></li>';
  }//歌手
  else {
  rankingByRanking += '<ul class="music_list music_list_hide h_music_list h_music_libray_list"><li class="list list_title_color"><span class="fl soundmsgspan08">排名</span><span class="fl soundmsgspan08 mr20">趋势</span><span class="fl soundmsgspan09">歌手</span><span class="fr mr10">指数</span></li>';
  }
  $.each(data.contents,function(key, items) {
  // var rankingindex = key + 1;
  var rankingindex = key + 1+((page-1)*pageSize);
  if (rankingindex < 10) {
  rankingindex = '0' + rankingindex;
  }
  //歌曲
  if (classId == 1) {
   
  rankingByRanking +='<li><span class="fl soundmsgspan08 ">'+
  '<span class="num num_yellow_'+rankingindex+' ml10 dis_in">'+ rankingindex+ '</span></span>'+
  '<span class="fl soundmsgspan08 mr20">'+ getUpDown(items.weekUpdown)+ '</span>'+
  '<span class="fl soundmsgspan10 mr20"><a href="detail.html?type=0&class=1&num='+data.rankingId+'&contentId='+ items.contentId + '" title="'+ items.name+ '" target="_blank">'+ subString(items.name, 26, true)+ '</a></span>'+
  '<span class="fl percent soundmsgspan01"><a href="detail.html?type=0&class=1&num='+data.rankingId+'&contentId='+ items.contentId + '" target="_blank" >' + formatNumber(items.amount,',')+'</a></span>'+
  '<span class="icon_tools fr">'+getPlayIconStyle(2,items.businessId)+'</span>'+
  '</li>';
  }//歌手
  else if (classId == 2) {
   
  rankingByRanking +='<li><span class="fl soundmsgspan08 ">'+
  '<span class="num num_yellow_'+rankingindex+' ml10 dis_in">'+ rankingindex+ '</span></span>'+
  '<span class="fl soundmsgspan08 mr20">'+ getUpDown(items.weekUpdown)+ '</span>'+
  '<span class="fl soundmsgspan10"><a href="detail.html?type=0&class=2&num='+data.rankingId+'&contentId='+ items.contentId + '" target="_blank">'+ subString(items.name, 26, true)+ '</a></span>'+
  '<span class="fr percent"><a href="detail.html?type=0&class=2&num='+data.rankingId+'&contentId='+ items.contentId + '" target="_blank" >' + formatNumber(items.amount,',')+'</a></span>'+
  '</li>';
  }
  });
  rankingByRanking += '</ul>';
  $('#right').html(rankingByRanking);
  } else {
  $('#right').html(rankingByRanking + '<ul><li>暂无数据</li></ul>');
  }
  }
  });
  }
   
  $(window).bind(
  "scroll",
  function() {
  if ($(document).height() - $(this).scrollTop()
  - $(this).height() <= 100) {
  if(!IsGetInfo){
  if(typeId== 13 || typeId== 14 || typeId== 11 || typeId== 5){
  IsGetInfo = true;return false;
  }else{
  getPlushList();
  }
  }
  }
  });
   
  //下一页
  function nextpage(){
  pagepaper++;
  page++;
  $('#right').empty();
  scroll(0,0);
  IsGetInfo = false;
  getAllRankings();
  }
  //上一页
  function prepage(){
  pagepaper--;
  page = (pagesizepaper*(pagepaper-1));
  if(page<1){
  page=1;
  }else{
  page = page+1;
  }
  $('#right').empty();
  scroll(0,0);
  IsGetInfo = false;
  getAllRankings();
  }
  function getPlushList(){
  IsGetInfo = true;
  if((page%pagesizepaper)==0){
  IsGetInfo = true;
  //alert(page);
  if(page<5){
  $('#right ul.music_list').append('<li id="change_pages" style="text-align:center"><a href="javascript:nextpage();">下一页</a></li>');
  }else{
  $('#right ul.music_list').append('<li id="change_pages" style="text-align:center"><a href="javascript:prepage();">上一页</a><a href="javascript:nextpage();">下一页</a></li>');
  }
  return ;
  }else{
  page++;
  $.ajax({
  type : "GET",
  url : config.migu_more_list_act + "?type=" + typeId+"&page="+page+"&pageSize="+pageSize,
  timeout : 30000,
  dataType : "JSON",
  beforeSend : function() {
  //$("#right").html('<img width="32" height="32" src="images/loading.gif" style="vertical-align:middle;" alt="正在加载数据中" title="正在加载数据中"/>');
  $('#right ul.music_list').append('<li id="waterfallbefore" style="text-align:center"><img width="32" height="32" src="images/loading.gif" style="vertical-align:middle;" alt="正在加载数据中" title="正在加载数据中"/></li>');
  },
  error : function(response) {
  alert('request data error');
  },
  success : function(data) {
  $('#waterfallbefore').remove();
  if(!data)
  {
  IsGetInfo = true;
  if(pagepaper>1){
  $('#right ul.music_list').append('<li id="change_pages" style="text-align:center"><a href="javascript:prepage();">上一页</a></li>');
  }else{
  $('#right ul.music_list').append('<li style="text-align:center">没有更多的数据</li>');
  }
  return;
  }
  //*
  if (data.contents) {
  $('#waterfallbefore').remove();
  if(data.contents==''){
  IsGetInfo = true;
  if(pagepaper>1){
  $('#right ul.music_list').append('<li id="change_pages" style="text-align:center"><a href="javascript:prepage();">上一页</a></li>');
  }else{
  $('#right ul.music_list').append('<li style="text-align:center">没有更多的数据</li>');
  }
  return ;
  }else{
  var rankingByRanking = '';
  $.each(data.contents,function(key, items) {
  var rankingindex = key + 1+((page-1)*pageSize);
  if (rankingindex < 10) {
  rankingindex = '0' + rankingindex;
  }
  //歌曲
  if (classId == 1) {
  rankingByRanking ='<li><span class="fl soundmsgspan08 ">'+
  '<span class="num ml10 dis_in">'+ rankingindex+ '</span></span>'+
  '<span class="fl soundmsgspan08 mr20">'+ getUpDown(items.weekUpdown)+ '</span>'+
  '<span class="fl soundmsgspan10 mr20"><a href="detail.html?type=0&class=1&num='+data.rankingId+'&contentId='+ items.contentId + '" title="'+ items.name+ '" target="_blank">'+ subString(items.name, 26, true)+ '</a></span>'+
  '<span class="fl percent soundmsgspan01"><a href="detail.html?type=0&class=1&num='+data.rankingId+'&contentId='+ items.contentId + '" target="_blank" >' + formatNumber(items.amount,',')+'</a></span>'+
  '<span class="icon_tools fr">'+getPlayIconStyle(2,items.businessId)+'</span>'+
  '</li>';
  }//歌手
  else if (classId == 2) {
  rankingByRanking ='<li><span class="fl soundmsgspan08 ">'+
  '<span class="num num_yellow_'+rankingindex+' ml10 dis_in">'+ rankingindex+ '</span></span>'+
  '<span class="fl soundmsgspan08 mr20">'+ getUpDown(items.weekUpdown)+ '</span>'+
  '<span class="fl soundmsgspan10"><a href="detail.html?type=0&class=2&num='+data.rankingId+'&contentId='+ items.contentId + '" target="_blank">'+ subString(items.name, 26, true)+ '</a></span>'+
  '<span class="fr percent"><a href="detail.html?type=0&class=2&num='+data.rankingId+'&contentId='+ items.contentId + '" target="_blank" >' + formatNumber(items.amount,',')+'</a></span>'+
  '</li>';
  }
  $('#right ul.music_list').append(rankingByRanking);
  });
  IsGetInfo = false;
  }
  } else {
  IsGetInfo = true;
  if(pagepaper>1){
  $('#right ul.music_list').append('<li id="change_pages" style="text-align:center"><a href="javascript:prepage();">上一页</a></li>');
  }else{
  $('#right ul.music_list').append('<li style="text-align:center">没有更多的数据</li>');
  }
  return;
  }
  }
  });
  }
  }
  -->
   
文章标签：
JavaScript
前端开发
数据格式
JSON
zchd
目录
相关文章
亚丁号
|
8月前
|
移动开发 JSON JavaScript
分享112个图片切换，总有一款适合您
分享112个图片切换，总有一款适合您
亚丁号
52 0
小老头头头头
|
8月前
|
前端开发 JavaScript
瀑布流布局怎样实现
瀑布流布局怎样实现
小老头头头头
49 1
极客小俊
|
JavaScript 前端开发 开发者
【纯原生JS】 我居然用onmouseover+onmouseout+onmousemove鼠标事件来实现了商品放大镜效果 明白了 原来还可以这么干 附上源代码文件
用onmouseover+onmouseout+onmousemove鼠标事件来实现商品放大镜效果
极客小俊
87 0
【纯原生JS】 我居然用onmouseover+onmouseout+onmousemove鼠标事件来实现了商品放大镜效果 明白了 原来还可以这么干 附上源代码文件
剽悍一小兔
|
前端开发 程序员
第五节 关于浮动和清除浮动的解说，以及两个大坑不要踩
第五节 关于浮动和清除浮动的解说，以及两个大坑不要踩
剽悍一小兔
126 0
小蚂蚁XMY
|
图形学
如何做出好看的粒子效果
嗨！大家好，我是小蚂蚁。 微信小游戏制作工具提供了简单的粒子插件，使用起来简单明了（如果你用过Unity的粒子组件就知道这个有多简单明了了），虽然功能相对简单，可设置的属性也有限，但是我们仍然能够用它在游戏中做出漂亮的效果。 比如说在彩虹星球大冒险中，所有的爆炸都是使用的粒子效果来实现的。
小蚂蚁XMY
144 0
小猪课堂
|
前端开发 JavaScript 索引
2022年了！再来手撕一下前端瀑布流代码吧！
**前言： **知识是学不完的，可是我们为什么还是要不停的去学习呢。原因很简单，因为我们要产生更多的知识，让更多的人学不完！前端技术也是在不停的革新，我们要做那个让别人有学不完的知识的人
小猪课堂
1030 0
2022年了！再来手撕一下前端瀑布流代码吧！
落798.
|
前端开发 JavaScript 容器
【一个让你停不下来的动效】——难道不来瞅瞅？（含源码+思路）
【一个让你停不下来的动效】——难道不来瞅瞅？（含源码+思路）
落798.
173 0
小凡晓宇
autojs之RecycleView抽丝剥茧
作者: 牙叔 使用情景: 解析RecycleView常用方法
小凡晓宇
357 0
autojs之RecycleView抽丝剥茧
前端充电宝
|
前端开发
实现九宫格布局，你能想到多少种方法？
最近看到一个面试题：实现一个九宫格布局，用尽可能多的方式去实现？ 搜了一下牛客面经，腾讯、字节、百度、网易、京东等的面经中都出现过这道题目。所以今天就来实现一下，看有多少种实现方式（下面实现的九宫格布局是自适应页面大小的）
前端充电宝
710 0
crperx
|
JavaScript Android开发 数据安全/隐私保护
移动端爬坑记 --- （1）布局与样式上的奇葩偶遇
Flex想要兼容众多花样式手机，要注意以下这么些 • 前缀要考虑2009~2012年的语法[webkit-box,flex,flex-box] • 少用复合属性，比如flex:1，考虑兼容理应拆成[flex-grow,flex-shrink,flex-basis]；flex-flow拆开成[flex-direction,flex-wra
crperx
151 0

热门文章

最新文章

  • 1
    securecrt克隆会话与sshd 的 MaxSessions
  • 2
    阿里云学生服务器优惠购买入口
  • 3
    GitHub 宣布正式收购 npm | 云原生生态周报 Vol. 42
  • 4
    “2016首届北森用户生态大会”携你探寻人才管理的新生态
  • 5
    贵州邮政：IMO班聊让内部沟通信息跳涨10万+
  • 6
    Android的界面设计工具 DroidDraw
  • 7
    使用Android Studio创建第一个Hello World应用程序
  • 8
    C# 结构（很少能用到）
  • 9
    [BoUML]生成代码
  • 10
    Tsung: A open-source, multi-protocol, distributed load testing tool
  • 1
    《探寻开源AI项目的资金密码：可持续运营之路》
    29
  • 2
    《开源数据：点燃人工智能在自然语言处理与计算机视觉领域的突破引擎》
    21
  • 3
    《开源算法：人工智能领域的双刃剑》
    32
  • 4
    《深度剖析：开源与闭源模型，AI舞台上的不同角色》
    28
  • 5
    《解锁数据新动能：数据标注工具与AI模型训练平台的无缝对接热潮》
    29
  • 6
    为了提升运维工程师及开发者
    104
  • 7
    吴恩达2024 AI总结 | AI大咖说
    30
  • 8
    招行面试：高并发写，为什么不推荐关系数据？
    48
  • 9
    基于QLearning强化学习的较大规模栅格地图机器人路径规划matlab仿真
    116
  • 10
    《docker基础篇：6.本地镜像发布到私有库》包括本地镜像发布到私有库流程、docker regisry是什么、将本地镜像推送到私有库
    53

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    DataWorks智能交互式数据开发与分析之旅