瀑布流事件

1.用到的技术 js,jquery,underscore,ajax,数据采用json传递

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin:0;
            padding:0;
        }
        body {
            background-color:#ccc;
        }

        #waterfull {
            width:800px;
            position:relative;
            margin:10px auto;
        }

        .grid {
            width:240px;
            padding:10px;
            position:absolute;
            border-radius:15px;
            background-color:#fff; 
        }

         .grid img {
             width:240px;
             display:block;  
         }
         .loading {
            width:100%;
            line-height:30px;
            font-size:18px;
            text-align:center;
            color:#fff;
         }

    </style>
    <script type="text/template" id="template">
        <div class="grid">
            <img src="<%=imgurl%>" alt="">
            <p><%=content%></p>
            <p><%=author%></p>
        </div>
    </script>
</head>
<body>
    <div id="waterfull">
     <!--    <div class="grid">
         <img src="images/0.png" alt="">
         <p>图片详情图片详情</p>
     </div> -->
    </div>
    <div class="loading">
        图片正在加载......
    </div>
    <script src="../jquery-1.12.4.js"></script>
    <script src="../underscore.js"></script>
    <script>
        //获取模板函数
        var compile = _.template($("#template").html());     
        var cols = [0,0,0]; 
        //ajax获取数据
        var page = 1;
        jsonDataRender(page);
        function jsonDataRender(page){
            $.get("json/json"+page+".txt",function(data){
            //data转化为json对象
            var dataJson = JSON.parse(data);
            if(dataJson.news.length == 0){
                console.log("没有数据了......");
                $(".loading").show().html("数据已经加载完了......");
                console.log("1");
                return;
            }
            //$waterfull = $("#waterfull");
            _.each(dataJson.news,function(dictionary){
                var image = new Image(); //图片预加载
                image.src = dictionary.imgurl;
                $(image).load(function(){
                    var domStr = compile(dictionary);
                    var $grid = $(domStr);/*不知道这里为什么必须要接受一下*/
                    $("#waterfull").append($grid);
                    var minHeight = _.min(cols);
                    var minIndex = _.indexOf(cols,minHeight);
                    $grid.css({
                        "left":minIndex*270,
                        "top":minHeight
                    });
                    cols[minIndex] += $grid.outerHeight()+20;
                    // 给最大的盒子设置高度
                    $("#waterfull").css("height",_.max(cols)); //设置数据加载完毕时显示提示
                    lock = true;
                    $(".loading").hide();
                    console.log("2");
                }); 
            });

            });

        }

        var lock = true;
        $(window).scroll(function(){
            if(!lock) return; 
            //拉到低的时候窗口向上滚动的距离 $(window).scrollTop()+$(window).height() == $(document).height()；
            var rate = $(window).scrollTop()/($(document).height()-$(window).height());
            if(rate >= 0.8){
                page++;
                jsonDataRender(page);
                lock = false;
            }
        });
        
    </script>
</body>
</html>

{
    "news" : [
        {    
            "imgurl" : "images/0.png" ,
            "title" : "标题标题标题标题标题标题0",
            "content" : "内容内容内容内容内容内容内容内容内容内容内容",
            "author" : "作者"
        },
        {    
            "imgurl" : "images/1.png" ,
            "title" : "标题标题标题标题标题标题1",
            "content" : "内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
            "author" : "作者"
        },
        {    
            "imgurl" : "images/2.png" ,
            "title" : "标题标题标题标题标题标题2",
            "content" : "内容内容内容内容内容容内容内容内容内容内容内容内容内容内容",
            "author" : "作者"
        },
        {    
            "imgurl" : "images/3.png" ,
            "title" : "标题标题标题标题标题标题3",
            "content" : "内容内容内容内内容内容内容内内容内容内容内内容内容内容内容内容内容内容内容内容内容内容",
            "author" : "作者"
        },
        {    
            "imgurl" : "images/4.png" ,
            "title" : "标题标题标题标题标题标题4",
            "content" : "内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
            "author" : "作者"
        },
        {    
            "imgurl" : "images/5.png" ,
            "title" : "标题标题标题标题标题标题5",
            "content" : "内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
            "author" : "作者"
        },
        {    
            "imgurl" : "images/6.png" ,
            "title" : "标题标题标题标题标题标题6",
            "content" : "内容内容内容内容内容容内容内容内容内容",
            "author" : "作者"
        },
        {    
            "imgurl" : "images/7.png" ,
            "title" : "标题标题标题标题标题标题7",
            "content" : "内容内容内容内内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
            "author" : "作者"
        },
        {    
            "imgurl" : "images/8.png" ,
            "title" : "标题标题标题标题标题标题8",
            "content" : "内容内容内容内容容内容内容内容内容",
            "author" : "作者"
        },
        {    
            "imgurl" : "images/9.png" ,
            "title" : "标题标题标题标题标题标题9",
            "content" : "内容内容内容内容内容内容内容内容内容内内容内容内容内容内容容内容",
            "author" : "作者"
        },
        {    
            "imgurl" : "images/10.png" ,
            "title" : "标题标题标题标题标题标题10",
            "content" : "内容内容内容内",
            "author" : "作者"
        },
        {    
            "imgurl" : "images/11.png" ,
            "title" : "标题标题标题标题标题标题11",
            "content" : "内容内容内容内容内容内容内容内容内容内容内容",
            "author" : "作者"
        },
        {    
            "imgurl" : "images/12.png" ,
            "title" : "标题标题标题标题标题标题12",
            "content" : "内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容容",
            "author" : "作者"
        },
        {    
            "imgurl" : "images/13.png" ,
            "title" : "标题标题标题标题标题标题13",
            "content" : "内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
            "author" : "作者"
        },
        {    
            "imgurl" : "images/14.png" ,
            "title" : "标题标题标题标题标题标题14",
            "content" : "内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
            "author" : "作者"
        },
        {    
            "imgurl" : "images/15.png" ,
            "title" : "标题标题标题标题标题标题15",
            "content" : "内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容",
            "author" : "作者"
        },
        {    
            "imgurl" : "images/16.png" ,
            "title" : "标题标题标题标题标题标题16",
            "content" : "内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容",
            "author" : "作者"
        },
        {    
            "imgurl" : "images/17.png" ,
            "title" : "标题标题标题标题标题标题17",
            "content" : "内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容",
            "author" : "作者"
        },
        {    
            "imgurl" : "images/18.png" ,
            "title" : "标题标题标题标题标题标题18",
            "content" : "内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容",
            "author" : "作者"
        },
        {    
            "imgurl" : "images/19.png" ,
            "title" : "标题标题标题标题标题标题19",
            "content" : "内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容",
            "author" : "作者"
        }
    ]
}