jquery瀑布流布局

浏览数：54 / 时间：2015年06月09日

前端

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>测试</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="author" content="stilearning" />
    <link href="/static/home/css/css.css" rel="stylesheet">
    <script src="/static/js/jquery.min.1.11.1.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body style="background:#f5f5f5;">
    <header class="i_header">测试</header>
    <div class="arc">
        <div class="arc_ul" id="list"></div>
        <div class="loading"><a href="javascript:void(0)" data-page="1" id="loading">加载更多</a></div>
    </div>
    <footer class="i_footer">版权所有</footer>

<script>
//ajax分页插件
(function($){
    $.fn.paging = function(options){
        var ops = $.extend(true,$.fn.paging.defaults, options);
        ops.mythis = this;

        //分页数据函数，得到数据并显示
        var getData = function(page,size){
            var data =$.extend({},ops.data, {page:page,size:size});
            $.ajax({
                type:ops.type,
                url:ops.url,
                data:data,
                dataType:ops.dataType,
                beforeSend: ops.beforeSend,
                success: function(json){
                    $("#lding").remove();
                    ops.list(json);
                    getPageBar(json);
                    ops.mythis.attr("data-page",ops.page+1);
                }
            });
        }
        getData(1,ops.size);

        //*loading条显示
        var getPageBar = function(json){
            var total = json.data;//总条数
            if(!json.data.length){
                ops.status=2;
                $("#loading").text("已全部加载完成");
                return ;
            }
        }

        //点击分页跳转
        ops.mythis.on(‘click‘, function(event) {
            ops.page = parseInt($(this).attr("data-page"));            
            if(ops.page && ops.status!=2){getData(ops.page,ops.size);}
        });

        return this;
    };

    $.fn.paging.defaults = {
        page:1,//开始的页数
        size:10,//每页显示数       
        mythis:{},//当前的分页对象
        data:{},//发向后台的额外数据
        status:1,//加载的状态，2为全部加载完成，1为未加载完
        list:function(){},//列表
        fpage:function(){},//显示分页
        url:"/",//ajax请求地址
        type:"GET",//发送方式
        dataType:"json",//默认的
        beforeSend: function(){$("#list").append(‘<li id="lding">loading……</li>‘);},
    }

})(jQuery);

$(function(){ 
    $.extend(true,$.fn.paging.defaults,{
        size:10,//每页显示数
        list:function(json){            
            var html="";
            var list = json.data;
            $.each(list,function(k,v){
                html += ‘<div class="arc_list"><div class="pic"><a href="/admin/index/diaocha?id=‘+v.id+‘"><img src="/static/home/images/ico‘+v.ico+‘.png"></a></div><h3>‘+v.name+‘</h3></div>‘;
            });
            $("#list").append(html);
        },//列表
        url:"/admin/index/list",//后台地址
    }); 
    $("#loading").paging();

});
</script>
</body>
</html>

后台

//@router /index/list [get]
func (this *IndexController) List() {
	page, _ := this.GetInt64("page")
	size, _ := this.GetInt64("size")
	if page == 0 || size == 0 {
		this.AjaxReturn(0, "参数错误", 0)
		return
	}
	start := (page - 1) * size
	count, _ := models.M("diaochalist").Field("count(id) as count").Count()
	data, err := models.M("diaochalist").Order("id desc").Limit(start, size).Select()
	fmt.Println(models.Get_sql_string())
	if err != nil {
		this.AjaxReturn(0, "查询失败："+err.Error(), 0)
		return
	}
	this.AjaxReturn(int(count), "ok", data)
}

（我使用的是golang，其他语言也可以只要返回的是格式对就行）

技术分享