基于jQuery的瀑布流效果

基于jQuery的瀑布流效果

设计思想：利用元素的绝对定位来实现瀑布流效果。其中页面滚动到底部可以按需求加载更多，可以自定义每列的宽度，且可以通过改变页面的宽度来重置列数，且列数切换时通过动画过渡。

实现代码：
1.css

*{margin:0; padding:0;}
body{background-color:#efefef;}
ul,li{list-style: none;}
.container{margin:20px 0;}
.container ul{margin:0 auto; position: relative;}
.container ul li{position: absolute; width:270px; padding:10px; border:1px solid #ddd; background-color: #fff; box-shadow: 1px 3px 3px #ddd;}
.container ul li img{width:270px;}
.container ul li h3{font-size: 18px; color:#333; line-height: 30px; font-weight: normal;}
.container ul li p{font-size: 14px; line-height: 20px; color:#999;}

2.html

<div class="container">
    <ul id="container"></ul>
</div>

3、js调用插件

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript" src="./waterFall.js"></script>
<script type="text/javascript">
$(function(){
    //调用瀑布流插件
    $("#container").waterFall({
        iWidth:300,
        iSpace:10,
        iUrl:'https://api.douban.com/v2/movie/top250',
        backFn:function(obj,data){
            var str = '<li><img src="'+ data.images.small +'" width="270" height="385"/><h3>'+ data.title +'</h3><p>'+ data.title + data.title + data.title + data.title + data.title +'</p></li>';
            obj.append(str)
        }
    })
})
</script>

4、waterFall插件

/*Mr Zhang*/
/*瀑布流插件*/
$(function(){
    var wf = {
        init:function(obj,args){
            wf.setClumn(obj,args);
            wf.getData(obj,args);
            wf.initData(obj,args);
            wf.setResize(obj,args);
            wf.setScroll(obj,args);
        },
        setClumn:function(obj,args){
            var iClumnWidth = args.iWidth + args.iSpace;
            var iClumn = 0;
            iClumn = Math.floor($(window).innerWidth() / iClumnWidth);
            //设置iClumn的边界值
            if(iClumn < 3){
                iClumn = 3;
            }
            if(iClumn > 6){
                iClumn = 6;
            }
            //设置容器宽度
            obj.css('width',iClumnWidth * iClumn)
            args.iClumn = iClumn;
        },
        getData:function(obj,args){
            $.ajax({
                url:args.iUrl + '?start=' + args.pageNum * 20,
                type:'get',
                dataType:'jsonp',
                success:function(data){
                    //args.backFn(obj,data);
                    var oData = data.subjects;
                    $.each(oData,function(idx,item){
                        wf.getMini(obj,args);
                        args.backFn(obj,item);
                        obj.find('li').last().css({
                            left:args.arrL[args.oIndex],
                            top:args.arrT[args.oIndex]
                        })
                        wf.setData(obj,args);
                        args.oSys = true;
                    })
                    if(args.pageNum * 20 > data.total){
                        return false;
                    }
                }
            })
        },
        initData:function(obj,args){
            args.arrT = [];
            args.arrL = [];

            for(var i = 0; i < args.iClumn; i++){
                args.arrT.push(0);
            }

            for(var i = 0; i < args.iClumn; i++){
                args.arrL.push((args.iWidth + args.iSpace) * i)
            }

        },
        setData:function(obj,args){
            var oLi = obj.find("li");
            args.arrT[args.oIndex] = oLi.last().position().top + oLi.last().innerHeight() + args.iSpace;
        },
        getMini:function(obj,args){
            var arrMini = args.arrT[0];
            args.oIndex = 0;
            for(var i = 0; i < args.arrT.length; i++){
                if(arrMini > args.arrT[i]){
                    arrMini = args.arrT[i];
                    args.oIndex = i;
                }
            }
        },
        setResize:function(obj,args){
            $(window).on("resize",function(){
                wf.setClumn(obj,args);
                wf.initData(obj,args);

                obj.find("li").each(function(){
                    //获取其中最小top值的索引
                    wf.getMini(obj,args);
                    $(this).animate({
                        left:args.arrL[args.oIndex],
                        top:args.arrT[args.oIndex]
                    })
                    //重新设置arrT
                    args.arrT[args.oIndex] = args.arrT[args.oIndex]  + $(this).innerHeight() + args.iSpace;
                })

            })
        },
        setScroll:function(obj,args){
            $(window).on("scroll",function(){
                if(args.arrT[args.oIndex] < $(window).innerHeight() + $(document).scrollTop()){
                    if(args.oSys){
                        args.oSys = false;
                        args.pageNum++;
                        wf.getData(obj,args)
                    }
                }
            })
        }
    }

    $.fn.waterFall = function(options){
        var args = $.extend({
            iWidth:300,     //每一项的宽度
            iSpace:10,//每一项的间隔
            iUrl:'',//请求的api接口地址
            iClumn:0,//总共的列数
            arrT:[],
            arrL:[],
            oIndex:0,
            pageNum:0,//初始的分页页码
            oSys:false,
            backFn:function(obj,data){}//每一条数据的回调函数
        },options);
        //初始化
        wf.init(this,args)
    }
})