瀑布流_瀑布流博客-CSDN博客

<!DOCTYPE html>

<html>

<head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery.js"></script>
        <script src="js/template-web.js"></script>
        <style>
            *{
                margin:0;
                padding:0;
            }
            body{
                background: #f5f5f5;
            }
            .container{
                width: 1200px;
                margin:0 auto;
                padding-top:40px;
            }
            .container .items{
                position: relative;
            }
            .container .items .item{
                width: 236px;
                position: absolute;

            }
            .container .items .item img{
                width: 100%;
            }
            .btn{
                width: 280px;
                height: 40px;
                margin:30px auto;
                text-align: center;
                line-height: 40px;
                background: #ccc;
                font-size:24px;
                cursor:pointer;
                border-radius:6px;
            }
            .loading{
                background:transparent;
                cursor: text;
            }
        </style>
    </head>
<body>
    <div class="container">
        <div class="items">
        
        </div>
    </div>
    <div class="btn">正在加载中……</div>
    <script type="text/template" id="waterfall">
        {{each items}}
            <div class="item" >
                <img src="地址" style="json属性值" />
            </div>
        {{/each}}
    </script>

        $.fn.Waterfall = function(column){
        //这是瀑布流的容器
        var parent = $(this);
        var parentWidth =parent.width();
        //瀑布流当中的item
        var items = parent.children();
        var childWidth = items.width();
        //多少列
        var columnConut = column||5;
        //x间距，y间距
        var xspace = (parentWidth-childWidth*columnConut)/(columnConut-1);
        var yspace = 10;
        //需要有一个数组，记录每一列的高度变化
        var columnArray = [];
        //遍历items盒子
        items.each(function(index,obj){
            //当前遍历到的对象是DOM元素
            var $obj= $(obj);
            var height = $obj.height();

            //第一行比较特殊，所有的top都为0，当前还是没有高度columnArray
            if(index<columnConut){
                columnArray[index] = height;
                $obj.css({top:0,left:index*(childWidth+xspace)});
            }
            //正常情况下
            else{
            /*
            每一次都需要追加到最矮的那一列
            怎么找到最矮的那一列？？？？
            假设我们的第一个数据就是最矮的
            * */
            var minIndex = 0;
            var minHeight = columnArray[minIndex];
            for(var i=0;i<columnArray.length;i++){
                if(minHeight>columnArray[i]){
                minHeight = columnArray[i];
                minIndex = i;
            }
        };
        //当我们加一个盒子之后，我们要更新当前列的高度
        $obj.css({top:minHeight+yspace,left:minIndex*(childWidth+xspace)});
        columnArray[minIndex]= minHeight+yspace+$obj.height();
        //最后我们来设置瀑布流容器的高度
        //获取最高的那一列的高度
        var max = Math.max.apply(null,columnArray);
        parent.height(max);
    }

    })
}

//需求分析：
//1、首屏加载一次数据，渲染第一页的数据
//2、把第一页的数据变成瀑布流
//3、当我们点击加载更多的时候，去请求接口获取数据，把数据渲染成html（下一页）
//4、防止重复提交
//5、没有数据的时候，可以提示:没有数据可以加载了，不能发请求；
//用一个全局变量记录当前的页面：page
//请求数据

function getData(callback){
    $.ajax({
        type:"get",
        dataType:"jsonp",
        url:"http://120.78.90.148",
        data:"page="+page+"&pageSize=10",
        beforeSend:function(){
        /*判断当前是不是一个loading状态*/
        if($('.btn').hasClass('loading')){
            return false;
        }
        $('.btn').html('正在加载……').addClass('loading')
        },
        success:function(data){
            callback(data);
        }
    })
}

function readerHtml(data){
    /*
    1、数据
    2、利用模板引擎解析数据
    3、把数据渲染到页面当中
    * */
    var html = template('waterfall',{items:data});
    //追加
    $(".items").append(html);
    //处理瀑布流布局
    $(".items").Waterfall();
    //是否还有更多的数据
    if(data.length==0){
        //把按钮变成不能点击的状态
        $('.btn').html('没有更多的数据了').addClass('loading');
        return false;
    }
    //把按钮变成可以点击的状态
    $(".btn").removeClass('loading').html('点击加载更多');
}
    //默认加载第一页
    var page = 1;
    getData(readerHtml);
    //绑定点击事件
    $('body').on('click','.btn',function(){
        page++;
        getData(readerHtml);
    })
    $(window).on('scroll',function(){
        var offsetTop = $('.items').offset().top;
        var height = $('.items').height();
        var offset = (offsetTop+height)-$(this).scrollTop()-$(this).height();
        console.log(offset);
        if(offset<200&&!$('.btn').hasClass('loading')){
            page++;
            getData(readerHtml);
        }
    })
</script>
</body>
</html>