瀑布流下拉刷新

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

 （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}} onerror="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}}" onclick="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