android 瀑布流下拉刷新,瀑布流下拉刷新

知识点：使用瀑布流，实现数据列表的下拉刷新

(1)引入waterfall.js，jquery.imageload.js，handlebars.js三个js文件

(2)前端页面

{{#waterfall data}}

{{adv_time}}     

{{adv_resolving_power}}

{{adv_size}}

上传日期：{{create_time}}

{{file_type}}

{{file_name}}

{{/waterfall}}

//默认图片显示

function nofindimg(event) {

var img = event.srcElement||event.target;

img.src = "${pageContext.request.contextPath}/static/img/spring.png";

img.onerror = null;

}

//下拉刷新，每一页，ajax请求后台接口

$(document).ready(function () {

$('#waterfallContainer').waterfall({

debug: false,

path: function (page) {

var url="${pageContext.request.contextPath}/screen/adverlist/12/"+page+"?1=1";

if($("#name").val() !=null && $("#name").val() !=""){

url+="&name="+$("#name").val();

}

if($("input[name='adv']:checked").val() !=null && $("input[name='adv']:checked").val() !=""){

url+="&filetype="+$("input[name='adv']:checked").val();

}

return url;

}

});

});

//js工具里的方法

Handlebars.registerHelper('waterfall', function (result, options) {

var items = result;

var out = '';

for (var i = 0; i < items.length; i++) {

out += options.fn(items[i])

}

return out;

});

function find() {

$('#waterfallContainer').waterfall('removeItems', 'div.col-md-3');

$('#waterfallContainer').waterfall('scroll');

}

(3)后台接口

/**

* 查询所有广告信息

*

* @return

*/

@RequestMapping("/adverlist/{total}/{page}")

@ResponseBody

public Object advwaterfalllist(@PathVariable("total") int total,@PathVariable("page") Integer page, HttpServletRequest request)

{

AdvList advlist=new AdvList();

PageData pageData=new PageData(request);

pageData.put("page",(page - 1) * total);

pageData.put("total",total);

List adverlist=screenAdvService.getadverList(pageData);

advlist.setData(adverlist);

advlist.setTotal(5);

return advlist;

}

源码demo：https://github.com/shuaishuaihand/fileupload.git