瀑布流图片

最新推荐文章于 2021-08-09 14:55:52 发布

mumu42

最新推荐文章于 2021-08-09 14:55:52 发布

阅读量220

点赞数

分类专栏：经典案例

本文链接：https://blog.csdn.net/mumu42/article/details/78104337

版权

经典案例专栏收录该内容

23 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>瀑布流</title>
                <style>
            *{
                margin: 0;
                padding: 0;
                border: none;
                outline: none;
                }
            .box{
                position: relative;
                width: 1000px;
                margin: 0 auto;
            }
            img{
                position: absolute;
                width: 192px;
                overflow: hidden;
                height: 250px;
            }
            .btn{
                height: 50px;
                width: 200px;
                display: block;
                    text-align: center;
                margin: 20px auto;
            }
        </style>
        <script src="js/template-web.js"></script>
        <script src="js/jquery.js"></script>
    </head>
    <body>
        <div class="box">

        </div>
        <button class="btn">玩命加载中……</button>
        <script type="text/template" id="tpl">
            {{each items}}
                <img src="http://120.78.90.148:82/{{$value.path}}" style="height:{{$value.height}}px" />
            {{/each}}
        </script>
        <script>
            $.fn.waterfall=function(cols){
                var parent=$(this);
                var items=parent.children();
                var $items=$(items);
                var itemsWidth=$items.width();
                var x=(parent.width()-itemsWidth*cols)/(cols-1);
                var y=20;
                var arr=[];
                for(var i=0;i<cols;i++){
                    arr[i]=0;
                }
                var index=0;
                for(var i=0;i<items.length;i++){
                    var $i=$(items[i]);
                    var min=arr[0];
                    var index=0;
                    for(var j=0;j<cols;j++){
                        if(min>arr[j]){
                            min=arr[j];
                            index=j;
                        }
                    }
                    if(arr[index]==0){
                        $i.css({"top":(arr[index]+y)+"px","left":(index*itemsWidth+x*index)+"px"});
                    }else{
                        $i.css({"top":(arr[index]+y)+"px","left":(index*itemsWidth+x*index)+"px"});
                    }
                    arr[index]+=parseInt($i.height()+y);
                }
                var max=arr[0];
                for(var i=0;i<cols;i++){
                    if(max<arr[i]){
                        max=arr[i];
                    }
                }
                $(this).css("height",max+"px");
            }
            var page=1;
            function getData(){
                $.ajax({
                    "type":"get",
                    "dataType":"jsonp",
                    "url":"http://120.78.90.148",
                    "data":"page="+page+"&pageSize=10",
                    "beforeSend":function(){
                        if($(".btn").html()=="玩命加载中……"){
                            page--;
                            return;
                        }
                        $(".btn").html("玩命加载中……");
                    },
                    "success":function(data){
                    if(data.length==0){
                    $(".btn").html("没有更多数据了……");
                    return;
                }
                var html=template("tpl",{items:data});
                $(".box").append(html);
                $(".box").waterfall(5);
                $(".btn").html("点击加载更多……");
            }
        })
    }
    getData();
    $(".btn").click(function(){
        page++;
        getData();
    });

    $(window).scroll(function(){
        console.log(parseInt($(".box").height())-$(window).scrollTop());
        if((parseInt($(".box").height())-$(window).scrollTop())<500){
        page++;
        getData();
    }
});
</script>
</body>
</html>