瀑布流下拉刷新

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

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

 （2）前端页面

<!-- 数据列表 -->

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

    <div >

    </div>


</div>

<script type="text/x-handlebars-template" '>

<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