排行榜是现在门户网站，各种网站经常会出现的一种类型的菜单，而可以通过layui简单配置实现排行榜效果
1.首先定义一个范围

<div>
 <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>浏览量总排行榜</legend>
            </fieldset>
            <div style="font-family:Arial;font-size:16px" id="ViewPhbInfo">
                <!--排行榜载体-->
            </div>
</div>

2.使用方法初始化加载时动态加载排行榜内容

在这里插入代码片

模拟排行榜 用layui实现排行榜的效果

	var PhCount = 10;//排行榜数量
	//每个排行榜单的颜色
    var PhRdColor = ["red", "orange", "orange", "green", "green", "cyan", "blue", "black", "black", "blue"];
   
        var FxDATA ={};
		FxDATA.View=[];//可以从后台请求数据 这个地方进行模拟数据
		FxDATA.View.push({ViewCount:1100,MC:"测试数据1100点击"})；
		FxDATA.View.push({ViewCount:800,MC:"测试数据800点击"})；
		FxDATA.View.push({ViewCount:700,MC:"测试数据700点击"})；
		FxDATA.View.push({ViewCount:660,MC:"测试数据660点击"})；
		FxDATA.View.push({ViewCount:600,MC:"测试数据600点击"})；
		FxDATA.View.push({ViewCount:500,MC:"测试数据500点击"})；
		FxDATA.View.push({ViewCount:400,MC:"测试数据400点击"})；
		FxDATA.View.push({ViewCount:300,MC:"测试数据300点击"})；
		FxDATA.View.push({ViewCount:100,MC:"测试数据100点击"})；
        if (FxDATA != null && FxDATA.View != undefined) {//浏览量总排行榜 
            str = "<blockquote class='layui-elem-quote layui-quote-nm'>";//排行榜的载体
            for (var i = 0; i < FxDATA.View.length; i++) {
                if (i != 0) {
                    str = str + "<br>";
                }
				//分别表示排行榜的热度颜色 排行榜的点击数量 当前热度排行的名称
				//<span class='layui-badge-dot layui-bg-red'></span> <span class='layui-badge-rim'>200</span> <a>这个样式就可以形成一个排行榜效果</a>
				
                str = str + "<span class='layui-badge-dot layui-bg-" + PhRdColor[i] + "'></span> <span class='layui-badge-rim'>" + FxDATA.View[i].ViewCount + "</span> <a>" + FxDATA.View[i].MC + "</a>";
            }
            str = str + "</blockquote> ";
            $("#ViewPhbInfo").append(str);
        }

从而实现排行榜的效果 可以通过调整配置 排行榜展示数量和热度颜色，来微调样式

若有其他更好的方式，请联系作者，相互学习相互进步