瀑布流下拉刷新

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

 （1）引入waterfall.js，jquery.imageload.js，handlebars.js三个js文件

 （2）前端页面

<!-- 数据列表 -->

<div class="box" style=" border-top-width: 0px;margin-bottom: 0px;">

    <div id="waterfallContainer" class="box-body" style="padding-bottom: 0px;padding-top: 0px;">

    </div>


</div>

<script type="text/x-handlebars-template" id="waterfall-tpl">
    {{#waterfall data}}
    <div class="col-md-3">
        <div class="thumbnail">
            <div class="videobottom">
                <img src={{adv_url}} οnerrοr="nofindimg(event)" height="135px" width="240px" style="margin-top: -130px;margin-left: -5px;">
                <p>
                    <span class="{{adv_type}}" aria-hidden="true"></span>
                    <span style="color: black">{{adv_time}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <span  style="margin-right: 5px">{{adv_resolving_power}}</span>
                    <span  style="color: black">{{adv_size}}</span>
                </p>

            </div>
        </div>
        <div class="centerarea">
            <span class="pull-left">上传日期：{{create_time}} </span>
            <span class="pull-right">   {{file_type}}</span>
        </div>
        <div style="text-align: center;margin-top: 40px">
            <input type="checkbox" name="checkbox" value={{id}}><span id="{{id}}" οnclick="updatefilename(this)"  data-fileid="{{id}}">{{file_name}}</span>
        </div>
    </div>
    {{/waterfall}}
</script>

<script>
 //默认图片显示
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');
 }

</script>

（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<PageData> adverlist=screenAdvService.getadverList(pageData);
    advlist.setData(adverlist);
    advlist.setTotal(5);
    return advlist;
}


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

转载于:https://www.cnblogs.com/shuaifing/p/9582596.html